@coreui/vue-pro 4.3.0-beta.1 → 4.3.0

package/dist/utils/calendar.d.ts

@@ -3,6 +3,7 @@ export declare const convertToLocalTime: (d: Date, locale: string, options?: {})
 export declare const createGroupsInArray: (arr: any[], numberOfGroups: number) => any[][];
 export declare const getCurrentYear: () => number;
 export declare const getCurrentMonth: () => number;
+export declare const getLocalDateFromString: (string: string, locale: string, time?: boolean | undefined) => Date | undefined;
 export declare const getMonthName: (month: number, locale: string) => string;
 export declare const getMonthsNames: (locale: string) => string[];
 export declare const getYears: (year: number) => number[];
@@ -10,12 +11,13 @@ export declare const getMonthDetails: (year: number, month: number, firstDayOfWe
     date: Date;
     month: string;
 }[][];
+export declare const isDisableDateInRange: (startDate?: Date | null | undefined, endDate?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean;
 export declare const isDateDisabled: (date: Date, min?: Date | null | undefined, max?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
 export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isLastDayOfMonth: (date: Date) => boolean;
-export declare const isSameDateAs: (date: Date, date2: Date) => boolean;
+export declare const isSameDateAs: (date: Date | null, date2: Date | null) => boolean;
 export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isToday: (date: Date) => boolean;
 export declare const isValidDate: (date: string) => number | false;

package/dist/utils/time.d.ts

@@ -6,8 +6,12 @@ export declare const getListOfHours: (locale: string) => {
     value: number;
     label: string;
 }[];
-export declare const getMinutesOrSeconds: (locale: string) => {
-    value: number;
+export declare const getListOfMinutes: (locale: string, valueAsString?: boolean) => {
+    value: string | number;
+    label: string;
+}[];
+export declare const getListOfSeconds: (locale: string, valueAsString?: boolean) => {
+    value: string | number;
     label: string;
 }[];
 export declare const getSelectedHour: (date: Date | null, locale: string) => number | "";

package/dist/utils/transition.d.ts

@@ -0,0 +1,3 @@
+export declare const executeAfterTransition: (callback: () => void, transitionElement: HTMLElement, waitForTransition?: boolean) => void;
+export declare const getTransitionDurationFromElement: (element: HTMLElement) => number;
+export declare const triggerTransitionEnd: (element: HTMLElement) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.3.0-beta.1",
+  "version": "4.3.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -38,19 +38,20 @@
     "version_short": "4.2"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.4",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.1",
-    "@vue/test-utils": "^2.0.0-rc.17",
-    "rollup": "^2.70.1",
+    "@popperjs/core": "^2.11.5",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@vue/test-utils": "^2.0.0-rc.20",
+    "date-fns": "^2.28.0",
+    "rollup": "^2.70.2",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.6.2",
-    "vue": "^3.2.31",
+    "typescript": "^4.6.3",
+    "vue": "^3.2.33",
     "vue-types": "^4.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.1.0",
+    "@coreui/coreui-pro": "^4.2.0",
     "vue": "^3.2.21"
   },
   "standard": {

package/src/components/backdrop/CBackdrop.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, RendererElement, Transition } from 'vue'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CBackdrop = defineComponent({
   name: 'CBackdrop',
   props: {
@@ -16,24 +18,24 @@ const CBackdrop = defineComponent({
     const handleBeforeEnter = (el: RendererElement) => {
       el.classList.remove('d-none')
     }
+
     const handleEnter = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
         el.style.visibility = 'visible'
         el.classList.add('show')
       }, 1)
     }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       el.classList.remove('show')
     }
+
     const handleAfterLeave = (el: RendererElement) => {
       el.classList.add('d-none')
     }
+
     return () =>
       h(
         Transition,

package/src/components/button/CButton.ts

@@ -95,12 +95,12 @@ export const CButton = defineComponent({
     'click',
   ],
   setup(props, { emit, slots }) {
-    const handleClick = () => {
+    const handleClick = (event: Event) => {
       if (props.disabled) {
         return
       }
 
-      emit('click')
+      emit('click', event)
     }
     return () =>
       h(

package/src/components/calendar/CCalendar.ts

@@ -10,6 +10,7 @@ import {
   isDateDisabled,
   isDateInRange,
   isDateSelected,
+  isDisableDateInRange,
   isLastDayOfMonth,
   isSameDateAs,
   isToday,
@@ -26,6 +27,13 @@ const CCalendar = defineComponent({
     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.
      */
@@ -47,7 +55,6 @@ const CCalendar = defineComponent({
      * - 4 - Thursday,
      * - 5 - Friday,
      * - 6 - Saturday,
-     * - 7 - Sunday
      */
     firstDayOfWeek: {
       type: Number,
@@ -139,40 +146,36 @@ const CCalendar = defineComponent({
     'end-date-change',
   ],
   setup(props, { slots, emit }) {
-    const calendarDate = ref(props.calendarDate ? new Date(props.calendarDate) : new Date())
+    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')
 
-    const maxDate = props.maxDate ? new Date(props.maxDate) : null
-    const minDate = props.minDate ? new Date(props.minDate) : null
-
     watch(
       () => props.calendarDate,
       () => {
-        if (props.calendarDate) calendarDate.value = new Date(props.calendarDate)
+        if (props.calendarDate) {
+          calendarDate.value = new Date(props.calendarDate)
+        }
       },
     )
 
     watch(
       () => props.startDate,
       () => {
-        if (props.startDate === null) {
-          startDate.value = null
-          return
-        }
-
-        if (props.startDate) {
-          const d = new Date(props.startDate)
-          if (startDate.value === null) {
-            startDate.value = d
-            return
-          }
-
-          if (startDate.value && !isSameDateAs(d, startDate.value)) {
-            startDate.value = d
-          }
+        const date = props.startDate ? new Date(props.startDate) : null
+        if (!isSameDateAs(date, startDate.value)) {
+          startDate.value = date
         }
       },
     )
@@ -180,21 +183,27 @@ const CCalendar = defineComponent({
     watch(
       () => props.endDate,
       () => {
-        if (props.endDate === null) {
-          endDate.value = null
-          return
+        const date = props.endDate ? new Date(props.endDate) : null
+        if (!isSameDateAs(date, endDate.value)) {
+          endDate.value = date
         }
+      },
+    )
 
-        if (props.endDate) {
-          const d = new Date(props.endDate)
-          if (endDate.value === null) {
-            endDate.value = d
-            return
-          }
+    watch(
+      () => props.maxDate,
+      () => {
+        if (props.maxDate) {
+          maxDate.value = new Date(props.maxDate)
+        }
+      },
+    )
 
-          if (endDate.value && !isSameDateAs(d, endDate.value)) {
-            endDate.value = d
-          }
+    watch(
+      () => props.minDate,
+      () => {
+        if (props.minDate) {
+          minDate.value = new Date(props.minDate)
         }
       },
     )
@@ -228,37 +237,61 @@ const CCalendar = defineComponent({
     }
 
     const handleCellOnClick = (date: Date) => {
-      if (isDateDisabled(date, minDate, maxDate, props.disabledDates)) {
+      if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
         return
       }
 
       if (props.range) {
         if (selectEndDate.value) {
-          // If endDate > date
+          selectEndDate.value = false
+
           if (startDate.value && startDate.value > date) {
-            endDate.value = startDate.value
-            startDate.value = date
-          } else {
-            endDate.value = date
+            startDate.value = null
+            endDate.value = null
+            return
           }
-          selectEndDate.value = false
-        } else {
-          startDate.value = date
-          selectEndDate.value = true
+
+          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
         }
-      } else {
+
+        selectEndDate.value = true
         startDate.value = date
+        return
       }
+
+      startDate.value = date
     }
 
     const handleCellMouseEnter = (date: Date) => {
-      if (isDateDisabled(date, minDate, maxDate, props.disabledDates)) {
+      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)
     }
 
@@ -289,14 +322,24 @@ const CCalendar = defineComponent({
       }
     }
 
-    const Calendar = () => {
+    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(
-        calendarDate.value.getFullYear(),
-        calendarDate.value.getMonth(),
+        date.getFullYear(),
+        date.getMonth(),
         props.firstDayOfWeek,
       )
       const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
-      const listOfYears = createGroupsInArray(getYears(calendarDate.value.getFullYear()), 4)
+      const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
       const weekDays = monthDetails[0]
 
       return h('table', {}, [
@@ -340,22 +383,33 @@ const CCalendar = defineComponent({
                         'calendar-cell',
                         {
                           today: isToday(date),
-                          disabled: isDateDisabled(date, minDate, maxDate, props.disabledDates),
-                          next: month === 'next',
-                          previous: month === 'previous',
+                          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),
-                      onClick: () => handleCellOnClick(date),
-                      onmouseenter: () => handleCellMouseEnter(date),
-                      onmouseleave: () => handleCellMouseLeave(),
+                      ...(month === 'current' && {
+                        onClick: () => handleCellOnClick(date),
+                        onmouseenter: () => handleCellMouseEnter(date),
+                        onmouseleave: () => handleCellMouseLeave(),
+                      }),
                     },
                     h(
                       'div',
@@ -379,7 +433,7 @@ const CCalendar = defineComponent({
                     {
                       class: 'calendar-cell month',
                       onClick: () => {
-                        setCalendarPage(0, index * 3 + idx)
+                        setCalendarPage(0, index * 3 + idx - addMonths)
                         view.value = 'days'
                       },
                     },
@@ -401,8 +455,8 @@ const CCalendar = defineComponent({
                       onClick: () => {
                         calendarDate.value = new Date(
                           year,
-                          calendarDate.value.getMonth(),
-                          calendarDate.value.getDate(),
+                          date.getMonth() - addMonths,
+                          date.getDate(),
                         )
                         view.value = 'months'
                       },
@@ -416,7 +470,17 @@ const CCalendar = defineComponent({
       ])
     }
 
-    const Navigation = () => {
+    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(
@@ -478,7 +542,7 @@ const CCalendar = defineComponent({
                     if (props.navigation) view.value = 'months'
                   },
                 },
-                () => calendarDate.value.toLocaleDateString(props.locale, { month: 'long' }),
+                () => date.toLocaleDateString(props.locale, { month: 'long' }),
               ),
             h(
               CButton,
@@ -489,7 +553,7 @@ const CCalendar = defineComponent({
                   if (props.navigation) view.value = 'years'
                 },
               },
-              () => calendarDate.value.toLocaleDateString(props.locale, { year: 'numeric' }),
+              () => date.toLocaleDateString(props.locale, { year: 'numeric' }),
             ),
           ],
         ),
@@ -539,7 +603,13 @@ const CCalendar = defineComponent({
           ),
       ])
     }
-    return () => h('div', { class: ['calendar', view.value] }, [h(Navigation), h(Calendar)])
+
+    return () =>
+      h('div', { class: 'calendars' }, [
+        Array.from({ length: props.calendars }, (_, index) =>
+          h('div', { class: ['calendar', view.value] }, [Navigation(index), Calendar(index)]),
+        ),
+      ])
   },
 })
 

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

package/src/components/date-picker/CDatePicker.ts

@@ -125,12 +125,16 @@ const CDatePicker = defineComponent({
      * - 4 - Thursday,
      * - 5 - Friday,
      * - 6 - Saturday,
-     * - 7 - Sunday
      */
     firstDayOfWeek: {
       type: Number,
       default: 1,
     },
+    /**
+     * Set date format.
+     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
+     */
+    format: String,
     /**
      * Toggle visibility of footer element or set the content of footer.
      */
@@ -224,18 +228,11 @@ const CDatePicker = defineComponent({
     return () =>
       h(CDateRangePicker, {
         calendars: 1,
-        onStartDateChange: (date: Date) => emit('date-change', date),
+        onStartDateChange: (date: Date, formatedDate: String) =>
+          emit('date-change', date, formatedDate),
         range: false,
         startDate: props.date,
         ...props,
-        // cleaner: props.cleaner,
-        // disabled: props.disabled,
-        // indicator: props.indicator,
-        // inputReadOnly: props.inputReadOnly,
-        // locale: props.locale,
-        // placeholder: props.placeholder,
-        // size: props.size,
-        // timepicker: props.timepicker,
       })
   },
 })