@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

package/dist/utils/getUID.d.ts

@@ -0,0 +1,2 @@
+declare const getUID: (prefix: string) => string;
+export default getUID;

package/dist/utils/index.d.ts

@@ -1,2 +1,5 @@
+import getUID from './getUID';
 import isInViewport from './isInViewport';
-export { isInViewport };
+import isObjectInArray from './isObjectInArray';
+import isRTL from './isRTL';
+export { getUID, isInViewport, isObjectInArray, isRTL };

package/dist/utils/isObjectInArray.d.ts

@@ -0,0 +1,2 @@
+declare const isObjectInArray: <T>(array: T[], item: T, ignore?: string[]) => boolean;
+export default isObjectInArray;

package/dist/utils/isRTL.d.ts

@@ -0,0 +1,2 @@
+declare const isRTL: (element?: HTMLElement | HTMLDivElement | null) => boolean;
+export default isRTL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.8.2",
+  "version": "4.9.0-beta.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -37,22 +37,22 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.7",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@types/jest": "^29.5.0",
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@types/jest": "^29.5.2",
     "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "29.2.3",
+    "@vue/vue3-jest": "29.2.4",
     "date-fns": "^2.29.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "rollup": "^3.20.2",
+    "rollup": "^3.25.0",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.0",
     "typescript": "^4.9.5",
-    "vue": "^3.2.47",
-    "vue-types": "^5.0.2"
+    "vue": "^3.3.4",
+    "vue-types": "^5.0.3"
   },
   "peerDependencies": {
     "@coreui/coreui-pro": "^4.3.4",

package/src/components/accordion/CAccordionItem.ts

@@ -6,14 +6,14 @@ const CAccordionItem = defineComponent({
     /**
      * The item key.
      */
-    itemKey: [Number, String]
+    itemKey: [Number, String],
   },
   setup(props, { slots }) {
     const activeItemKey = inject('activeItemKey') as Ref<number | string>
     const alwaysOpen = inject('alwaysOpen') as boolean
     const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
 
-    const itemKey = ref(props.itemKey ? props.itemKey : Math.random().toString(36).substr(2, 9))
+    const itemKey = ref(props.itemKey ?? Math.random().toString(36).slice(2, 11))
     const visible = ref(Boolean(activeItemKey.value === itemKey.value))
 
     watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value)))

package/src/components/backdrop/CBackdrop.ts

@@ -21,7 +21,7 @@ const CBackdrop = defineComponent({
           },
           onLeave: (el) => {
             el.classList.remove('show')
-          }
+          },
         },
         () =>
           props.visible &&

package/src/components/calendar/CCalendar.ts

@@ -123,6 +123,21 @@ const CCalendar = defineComponent({
      * Toggle select mode between start and end date.
      */
     selectEndDate: Boolean,
+    /**
+     * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
+     *
+     * @since 4.9.0
+     */
+    selectAdjacementDays: Boolean,
+    /**
+     * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+     *
+     * @since 4.9.0
+     */
+    showAdjacementDays: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Initial selected date.
      */
@@ -255,13 +270,14 @@ const CCalendar = defineComponent({
       emit('end-date-change', endDate.value)
     })
 
-    const setCalendarPage = (years: number, months = 0) => {
+    const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
       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)
+      typeof setMonth === 'number' && d.setMonth(setMonth)
 
       calendarDate.value = d
 
@@ -313,6 +329,14 @@ const CCalendar = defineComponent({
       startDate.value = date
     }
 
+    const handleCellKeyDown = (event: KeyboardEvent, date: Date) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        handleCellOnClick && handleCellOnClick(date)
+        return
+      }
+    }
+
     const handleCellMouseEnter = (date: Date) => {
       if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
         return
@@ -327,10 +351,24 @@ const CCalendar = defineComponent({
       emit('calendar-cell-hover', null)
     }
 
+    const handleMonthKeyDown = (event: KeyboardEvent, month: number) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarPage(0, month)
+        view.value = 'days'
+      }
+    }
+
+    const handleYearKeyDown = (event: KeyboardEvent, date: Date) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        calendarDate.value = date
+        view.value = 'months'
+      }
+    }
+
     const handleNavigationOnClick = (direction: string, double = false) => {
       if (direction === 'prev') {
         if (double) {
-          setCalendarPage(view.value !== 'days' ? -10 : -1)
+          setCalendarPage(view.value === 'days' ? -1 : -10)
           return
         }
         if (view.value !== 'days') {
@@ -342,7 +380,7 @@ const CCalendar = defineComponent({
       }
       if (direction === 'next') {
         if (double) {
-          setCalendarPage(view.value !== 'days' ? 10 : 1)
+          setCalendarPage(view.value === 'days' ? 1 : 10)
           return
         }
         if (view.value !== 'days') {
@@ -412,53 +450,68 @@ const CCalendar = defineComponent({
                 'tr',
                 {},
                 week.map(({ date, month }: { date: Date; month: string }) => {
-                  return h(
-                    'td',
-                    {
-                      class: [
-                        'calendar-cell',
+                  return month === 'current' || props.showAdjacementDays
+                    ? h(
+                        'td',
                         {
-                          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',
-                      },
-                      typeof props.dayFormat === 'function'
-                        ? props.dayFormat(date)
-                        : date.toLocaleDateString(props.locale, {
-                            day: <'numeric' | '2-digit'>props.dayFormat,
+                          class: [
+                            'calendar-cell',
+                            {
+                              today: isToday(date),
+                              disabled: isDateDisabled(
+                                date,
+                                minDate.value,
+                                maxDate.value,
+                                props.disabledDates,
+                              ),
+                              [month]: true,
+                              clickable: month !== 'current' && props.selectAdjacementDays,
+                              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),
+                            },
+                          ],
+                          tabindex:
+                            (month === 'current' || props.selectAdjacementDays) &&
+                            !isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)
+                              ? 0
+                              : -1,
+                          title: date.toLocaleDateString(props.locale),
+                          ...((month === 'current' || props.selectAdjacementDays) && {
+                            onBlur: () => handleCellMouseLeave(),
+                            onClick: () => handleCellOnClick(date),
+                            onFocus: () => handleCellMouseEnter(date),
+                            onKeydown: (event: KeyboardEvent) => handleCellKeyDown(event, date),
+                            onmouseenter: () => handleCellMouseEnter(date),
+                            onmouseleave: () => handleCellMouseLeave(),
                           }),
-                    ),
-                  )
+                          ...(month !== 'current' &&
+                            !props.selectAdjacementDays && {
+                              onMouseEnter: () => handleCellMouseLeave(),
+                            }),
+                        },
+                        h(
+                          'div',
+                          {
+                            class: 'calendar-cell-inner',
+                          },
+                          typeof props.dayFormat === 'function'
+                            ? props.dayFormat(date)
+                            : date.toLocaleDateString(props.locale, {
+                                day: <'numeric' | '2-digit'>props.dayFormat,
+                              }),
+                        ),
+                      )
+                    : h('td')
                 }),
               )
             }),
@@ -473,9 +526,12 @@ const CCalendar = defineComponent({
                     {
                       class: 'calendar-cell month',
                       onClick: () => {
-                        setCalendarPage(0, index * 3 + idx - addMonths)
+                        setCalendarPage(0, 0, index * 3 + idx - addMonths)
                         view.value = 'days'
                       },
+                      onKeydown: (event: KeyboardEvent) =>
+                        handleMonthKeyDown(event, index * 3 + idx - addMonths),
+                      tabindex: 0,
                     },
                     h('div', { class: 'calendar-cell-inner' }, month),
                   )
@@ -500,6 +556,12 @@ const CCalendar = defineComponent({
                         )
                         view.value = 'months'
                       },
+                      onKeydown: (event: KeyboardEvent) =>
+                        handleYearKeyDown(
+                          event,
+                          new Date(year, date.getMonth() - addMonths, date.getDate()),
+                        ),
+                      tabindex: 0,
                     },
                     h('div', { class: 'calendar-cell-inner' }, year),
                   )

package/src/components/carousel/CCarousel.ts

@@ -81,7 +81,7 @@ const CCarousel = defineComponent({
     const items = ref<VNode[]>([])
     const timeout = ref()
     const visible = ref()
-    
+
     const setAnimating = (value: boolean) => {
       animating.value = value
     }
@@ -142,16 +142,16 @@ const CCarousel = defineComponent({
     }
 
     const handleScroll = () => {
-      if (!document.hidden && carouselRef.value && isInViewport(carouselRef.value)) {
-        visible.value = true
-      } else {
-        visible.value = false
-      }
+      visible.value =
+        !document.hidden && carouselRef.value && isInViewport(carouselRef.value) ? true : false
     }
 
     onBeforeMount(() => {
       if (slots.default) {
-        const children = typeof slots.default()[0].type === 'symbol' ? slots.default()[0].children : slots.default()
+        const children =
+          typeof slots.default()[0].type === 'symbol'
+            ? slots.default()[0].children
+            : slots.default()
 
         if (children && Array.isArray(children)) {
           // @ts-expect-error TODO: fix types

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

@@ -219,6 +219,21 @@ const CDatePicker = defineComponent({
       type: String,
       default: 'Select date',
     },
+    /**
+     * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
+     *
+     * @since 4.9.0
+     */
+    selectAdjacementDays: Boolean,
+    /**
+     * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+     *
+     * @since 4.9.0
+     */
+    showAdjacementDays: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Size the component small or large.
      *
@@ -277,7 +292,7 @@ const CDatePicker = defineComponent({
     return () =>
       h(CDateRangePicker, {
         calendars: 1,
-        onStartDateChange: (date: Date, formatedDate: String) => {
+        onStartDateChange: (date: Date, formatedDate: string) => {
           emit('date-change', date, formatedDate)
           emit('update:date', date)
         },