@coreui/vue-pro 4.2.0 → 4.3.0

package/src/components/calendar/CCalendar.ts

@@ -0,0 +1,616 @@
+import { defineComponent, h, PropType, ref, watch } from 'vue'
+
+import { CButton } from '../button'
+
+import {
+  createGroupsInArray,
+  getMonthDetails,
+  getMonthsNames,
+  getYears,
+  isDateDisabled,
+  isDateInRange,
+  isDateSelected,
+  isDisableDateInRange,
+  isLastDayOfMonth,
+  isSameDateAs,
+  isToday,
+  isStartDate,
+  isEndDate,
+} from '../../utils/calendar'
+
+const CCalendar = defineComponent({
+  name: 'CCalendar',
+  props: {
+    /**
+     * Default date of the component
+     */
+    calendarDate: {
+      type: [Date, String],
+    },
+    /**
+     * The number of calendars that render on desktop devices.
+     */
+    calendars: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Specify the list of dates that cannot be selected.
+     */
+    disabledDates: {
+      type: Array as PropType<Date[] | Date[][]>,
+    },
+    /**
+     * Initial selected to date (range).
+     */
+    endDate: {
+      type: [Date, String],
+    },
+    /**
+     * Sets the day of start week.
+     * - 0 - Sunday,
+     * - 1 - Monday,
+     * - 2 - Tuesday,
+     * - 3 - Wednesday,
+     * - 4 - Thursday,
+     * - 5 - Friday,
+     * - 6 - Saturday,
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+     */
+    locale: {
+      type: String,
+      default: 'default',
+    },
+    /**
+     * Max selectable date.
+     */
+    maxDate: {
+      type: [Date, String],
+    },
+    /**
+     * Min selectable date.
+     */
+    minDate: {
+      type: [Date, String],
+    },
+    /**
+     * Show arrows navigation.
+     */
+    navigation: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Allow range selection.
+     */
+    range: Boolean,
+    /**
+     * Toggle select mode between start and end date.
+     */
+    selectEndDate: Boolean,
+    /**
+     * Initial selected date.
+     */
+    startDate: {
+      type: [Date, String],
+    },
+    /**
+     * Set length or format of day name.
+     *
+     * @type  number | 'long' | 'narrow' | 'short'
+     */
+    weekdayFormat: {
+      type: [Number, String],
+      default: 2,
+      validator: (value: string | number) => {
+        if (typeof value === 'string') {
+          return ['long', 'narrow', 'short'].includes(value)
+        }
+        if (typeof value === 'number') {
+          return true
+        }
+        return false
+      },
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the user hovers over the calendar cell.
+     *
+     * @property {Date | null} date
+     */
+    'calendar-cell-hover',
+    /**
+     * Callback fired when the calendar date changed.
+     *
+     * @property {Date | null} date
+     */
+    'calendar-date-change',
+    /**
+     * Callback fired when the start date changed.
+     *
+     * @property {Date | null} date
+     */
+    'start-date-change',
+    /**
+     * Callback fired when the end date changed.
+     *
+     * @property {Date | null} date
+     */
+    'end-date-change',
+  ],
+  setup(props, { slots, emit }) {
+    const calendarDate = ref(
+      props.calendarDate
+        ? new Date(props.calendarDate)
+        : props.startDate
+        ? new Date(props.startDate)
+        : new Date(),
+    )
+    const startDate = ref(props.startDate ? new Date(props.startDate) : null)
+    const endDate = ref(props.endDate ? new Date(props.endDate) : null)
+    const hoverDate = ref<Date | null>(null)
+    const maxDate = ref(props.maxDate ? new Date(props.maxDate) : null)
+    const minDate = ref(props.minDate ? new Date(props.minDate) : null)
+    const selectEndDate = ref(props.selectEndDate)
+    const view = ref('days')
+
+    watch(
+      () => props.calendarDate,
+      () => {
+        if (props.calendarDate) {
+          calendarDate.value = new Date(props.calendarDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.startDate,
+      () => {
+        const date = props.startDate ? new Date(props.startDate) : null
+        if (!isSameDateAs(date, startDate.value)) {
+          startDate.value = date
+        }
+      },
+    )
+
+    watch(
+      () => props.endDate,
+      () => {
+        const date = props.endDate ? new Date(props.endDate) : null
+        if (!isSameDateAs(date, endDate.value)) {
+          endDate.value = date
+        }
+      },
+    )
+
+    watch(
+      () => props.maxDate,
+      () => {
+        if (props.maxDate) {
+          maxDate.value = new Date(props.maxDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.minDate,
+      () => {
+        if (props.minDate) {
+          minDate.value = new Date(props.minDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.selectEndDate,
+      () => {
+        selectEndDate.value = props.selectEndDate
+      },
+    )
+
+    watch(startDate, () => {
+      emit('start-date-change', startDate.value)
+    })
+
+    watch(endDate, () => {
+      emit('end-date-change', endDate.value)
+    })
+
+    const setCalendarPage = (years: number, months = 0) => {
+      const year = calendarDate.value.getFullYear()
+      const month = calendarDate.value.getMonth()
+      const d = new Date(year, month, 1)
+
+      years && d.setFullYear(d.getFullYear() + years)
+      months && d.setMonth(d.getMonth() + months)
+
+      calendarDate.value = d
+
+      emit('calendar-date-change', d)
+    }
+
+    const handleCellOnClick = (date: Date) => {
+      if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
+        return
+      }
+
+      if (props.range) {
+        if (selectEndDate.value) {
+          selectEndDate.value = false
+
+          if (startDate.value && startDate.value > date) {
+            startDate.value = null
+            endDate.value = null
+            return
+          }
+
+          if (isDisableDateInRange(startDate.value, date, props.disabledDates)) {
+            startDate.value = null
+            endDate.value = null
+            return
+          }
+
+          endDate.value = date
+          return
+        }
+
+        if (endDate.value && endDate.value < date) {
+          startDate.value = null
+          endDate.value = null
+          return
+        }
+
+        if (isDisableDateInRange(date, endDate.value, props.disabledDates)) {
+          startDate.value = null
+          endDate.value = null
+          return
+        }
+
+        selectEndDate.value = true
+        startDate.value = date
+        return
+      }
+
+      startDate.value = date
+    }
+
+    const handleCellMouseEnter = (date: Date) => {
+      if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
+        return
+      }
+
+      hoverDate.value = date
+      emit('calendar-cell-hover', date)
+    }
+
+    const handleCellMouseLeave = () => {
+      hoverDate.value = null
+      emit('calendar-cell-hover', null)
+    }
+
+    const handleNavigationOnClick = (direction: string, double = false) => {
+      if (direction === 'prev') {
+        if (double) {
+          setCalendarPage(view.value !== 'days' ? -10 : -1)
+          return
+        }
+        if (view.value !== 'days') {
+          setCalendarPage(-1)
+          return
+        }
+        setCalendarPage(0, -1)
+        return
+      }
+      if (direction === 'next') {
+        if (double) {
+          setCalendarPage(view.value !== 'days' ? 10 : 1)
+          return
+        }
+        if (view.value !== 'days') {
+          setCalendarPage(1)
+          return
+        }
+        setCalendarPage(0, 1)
+        return
+      }
+    }
+
+    const Calendar = (addMonths: number) => {
+      let date = calendarDate.value
+
+      if (addMonths !== 0) {
+        date = new Date(
+          calendarDate.value.getFullYear(),
+          calendarDate.value.getMonth() + addMonths,
+          1,
+        )
+      }
+
+      const monthDetails = getMonthDetails(
+        date.getFullYear(),
+        date.getMonth(),
+        props.firstDayOfWeek,
+      )
+      const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
+      const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
+      const weekDays = monthDetails[0]
+
+      return h('table', {}, [
+        view.value === 'days' &&
+          h(
+            'thead',
+            {},
+            h(
+              'tr',
+              {},
+              weekDays.map(({ date }: { date: Date }) => {
+                return h(
+                  'th',
+                  { class: 'calendar-cell' },
+                  h(
+                    'div',
+                    {
+                      class: 'calendar-header-cell-inner',
+                    },
+                    props.weekdayFormat === 'string'
+                      ? date.toLocaleDateString(props.locale, { weekday: props.weekdayFormat })
+                      : date
+                          .toLocaleDateString(props.locale, { weekday: 'long' })
+                          .slice(0, props.weekdayFormat),
+                  ),
+                )
+              }),
+            ),
+          ),
+        h('tbody', {}, [
+          view.value === 'days' &&
+            monthDetails.map((week) => {
+              return h(
+                'tr',
+                {},
+                week.map(({ date, month }: { date: Date; month: string }) => {
+                  return h(
+                    'td',
+                    {
+                      class: [
+                        'calendar-cell',
+                        {
+                          today: isToday(date),
+                          disabled: isDateDisabled(
+                            date,
+                            minDate.value,
+                            maxDate.value,
+                            props.disabledDates,
+                          ),
+                          [month]: true,
+                          last: isLastDayOfMonth(date),
+                          range:
+                            month === 'current' &&
+                            isDateInRange(date, startDate.value, endDate.value),
+                          'range-hover':
+                            month === 'current' &&
+                            (hoverDate.value && selectEndDate.value
+                              ? isDateInRange(date, startDate.value, hoverDate.value)
+                              : isDateInRange(date, hoverDate.value, endDate.value)),
+                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          start: isStartDate(date, startDate.value, endDate.value),
+                          end: isEndDate(date, startDate.value, endDate.value),
+                        },
+                      ],
+                      title: date.toLocaleDateString(props.locale),
+                      ...(month === 'current' && {
+                        onClick: () => handleCellOnClick(date),
+                        onmouseenter: () => handleCellMouseEnter(date),
+                        onmouseleave: () => handleCellMouseLeave(),
+                      }),
+                    },
+                    h(
+                      'div',
+                      {
+                        class: 'calendar-cell-inner',
+                      },
+                      date.toLocaleDateString(props.locale, { day: 'numeric' }),
+                    ),
+                  )
+                }),
+              )
+            }),
+          view.value === 'months' &&
+            listOfMonths.map((row, index) => {
+              return h(
+                'tr',
+                {},
+                row.map((month, idx) => {
+                  return h(
+                    'td',
+                    {
+                      class: 'calendar-cell month',
+                      onClick: () => {
+                        setCalendarPage(0, index * 3 + idx - addMonths)
+                        view.value = 'days'
+                      },
+                    },
+                    h('div', { class: 'calendar-cell-inner' }, month),
+                  )
+                }),
+              )
+            }),
+          view.value === 'years' &&
+            listOfYears.map((row) => {
+              return h(
+                'tr',
+                {},
+                row.map((year) => {
+                  return h(
+                    'td',
+                    {
+                      class: 'calendar-cell year',
+                      onClick: () => {
+                        calendarDate.value = new Date(
+                          year,
+                          date.getMonth() - addMonths,
+                          date.getDate(),
+                        )
+                        view.value = 'months'
+                      },
+                    },
+                    h('div', { class: 'calendar-cell-inner' }, year),
+                  )
+                }),
+              )
+            }),
+        ]),
+      ])
+    }
+
+    const Navigation = (addMonths: number) => {
+      let date = calendarDate.value
+
+      if (addMonths !== 0) {
+        date = new Date(
+          calendarDate.value.getFullYear(),
+          calendarDate.value.getMonth() + addMonths,
+          1,
+        )
+      }
+
+      return h('div', { class: 'calendar-nav' }, [
+        props.navigation &&
+          h(
+            'div',
+            {
+              class: 'calendar-nav-prev',
+            },
+            [
+              h(
+                CButton,
+                {
+                  color: 'transparent',
+                  size: 'sm',
+                  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' }),
+                },
+              ),
+              view.value === 'days' &&
+                h(
+                  CButton,
+                  {
+                    color: 'transparent',
+                    size: 'sm',
+                    onClick: () => handleNavigationOnClick('prev'),
+                  },
+                  {
+                    /**
+                     * @slot Location for previous icon.
+                     */
+                    default: () =>
+                      slots.navPrevIcon
+                        ? slots.navPrevIcon()
+                        : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
+                  },
+                ),
+            ],
+          ),
+        h(
+          'div',
+          {
+            class: 'calendar-nav-date',
+          },
+          [
+            view.value === 'days' &&
+              h(
+                CButton,
+                {
+                  color: 'transparent',
+                  size: 'sm',
+                  onClick: () => {
+                    if (props.navigation) view.value = 'months'
+                  },
+                },
+                () => date.toLocaleDateString(props.locale, { month: 'long' }),
+              ),
+            h(
+              CButton,
+              {
+                color: 'transparent',
+                size: 'sm',
+                onClick: () => {
+                  if (props.navigation) view.value = 'years'
+                },
+              },
+              () => date.toLocaleDateString(props.locale, { year: 'numeric' }),
+            ),
+          ],
+        ),
+        props.navigation &&
+          h(
+            'div',
+            {
+              class: 'calendar-nav-next',
+            },
+            [
+              view.value === 'days' &&
+                h(
+                  CButton,
+                  {
+                    color: 'transparent',
+                    size: 'sm',
+                    onClick: () => handleNavigationOnClick('next'),
+                  },
+                  {
+                    /**
+                     * @slot Location for next icon.
+                     */
+                    default: () =>
+                      slots.navNextIcon
+                        ? slots.navNextIcon()
+                        : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
+                  },
+                ),
+              h(
+                CButton,
+                {
+                  color: 'transparent',
+                  size: 'sm',
+                  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' }),
+                },
+              ),
+            ],
+          ),
+      ])
+    }
+
+    return () =>
+      h('div', { class: 'calendars' }, [
+        Array.from({ length: props.calendars }, (_, index) =>
+          h('div', { class: ['calendar', view.value] }, [Navigation(index), Calendar(index)]),
+        ),
+      ])
+  },
+})
+
+export { CCalendar }

package/src/components/calendar/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CCalendar } from './CCalendar'
+
+const CCalendarPlugin = {
+  install: (app: App): void => {
+    app.component(CCalendar.name, CCalendar)
+  },
+}
+
+export { CCalendar, CCalendarPlugin }

package/src/components/collapse/CCollapse.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue'
+
 import { vVisible } from '../../directives/v-c-visible'
+import { executeAfterTransition } from './../../utils/transition'
 
 const CCollapse = defineComponent({
   name: 'CCollapse',
@@ -39,10 +41,9 @@ const CCollapse = defineComponent({
 
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      // collapsing.value = true
       setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
         if (props.horizontal) {
           el.style.width = `${el.scrollWidth}px`
           return
@@ -69,10 +70,8 @@ const CCollapse = defineComponent({
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       emit('hide')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
       setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
         if (props.horizontal) {
           el.style.width = '0px'
           return