@coreui/vue-pro 5.10.0 → 5.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,12 +41,12 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.8.0",
+    "@coreui/coreui-pro": "^5.14.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/jest": "^29.5.14",
     "@vue/test-utils": "^2.4.6",
@@ -54,12 +54,12 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.30.1",
+    "rollup": "^4.41.1",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
-    "vue": "^3.5.13",
-    "vue-types": "^5.1.3"
+    "ts-jest": "^29.3.4",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.16",
+    "vue-types": "^6.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/components/button/CButton.ts

@@ -93,9 +93,9 @@ export const CButton = defineComponent({
         {
           class: [
             'btn',
+            props.variant && props.color ? `btn-${props.variant}-${props.color}` : `btn-${props.variant}`,
             {
               [`btn-${props.color}`]: props.color && !props.variant,
-              [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
               [`btn-${props.size}`]: props.size,
               active: props.active,
               disabled: props.disabled,

package/src/components/calendar/CCalendar.ts

@@ -23,6 +23,7 @@ import {
   isYearInRange,
   isYearSelected,
   getSelectableDates,
+  setTimeFromDate,
 } from './utils'
 
 import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
@@ -256,20 +257,20 @@ const CCalendar = defineComponent({
         ? convertToDateObject(props.calendarDate, props.selectionType)
         : props.startDate
           ? convertToDateObject(props.startDate, props.selectionType)
-          : new Date(),
+          : new Date()
     )
     const startDate = ref<Date | null>(
-      props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null,
+      props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null
     )
     const endDate = ref(
-      props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null,
+      props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null
     )
     const hoverDate = ref<Date | null>(null)
     const maxDate = ref(
-      props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null,
+      props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null
     )
     const minDate = ref(
-      props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null,
+      props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null
     )
     const selectEndDate = ref(props.selectEndDate)
     const view = ref<ViewTypes>('days')
@@ -286,7 +287,7 @@ const CCalendar = defineComponent({
 
         view.value = (viewMap[props.selectionType] as ViewTypes) || 'days'
       },
-      { immediate: true },
+      { immediate: true }
     )
 
     watch(
@@ -295,7 +296,7 @@ const CCalendar = defineComponent({
         if (props.calendarDate) {
           calendarDate.value = new Date(props.calendarDate)
         }
-      },
+      }
     )
 
     watch(
@@ -307,7 +308,7 @@ const CCalendar = defineComponent({
         if (!isSameDateAs(date, startDate.value)) {
           startDate.value = date
         }
-      },
+      }
     )
 
     watch(
@@ -317,7 +318,7 @@ const CCalendar = defineComponent({
         if (!isSameDateAs(date, endDate.value)) {
           endDate.value = date
         }
-      },
+      }
     )
 
     watch(
@@ -326,7 +327,7 @@ const CCalendar = defineComponent({
         maxDate.value = props.maxDate
           ? convertToDateObject(props.maxDate, props.selectionType)
           : null
-      },
+      }
     )
 
     watch(
@@ -335,14 +336,14 @@ const CCalendar = defineComponent({
         minDate.value = props.minDate
           ? convertToDateObject(props.minDate, props.selectionType)
           : null
-      },
+      }
     )
 
     watch(
       () => props.selectEndDate,
       () => {
         selectEndDate.value = props.selectEndDate
-      },
+      }
     )
 
     watch(startDate, () => {
@@ -417,7 +418,7 @@ const CCalendar = defineComponent({
             return
           }
 
-          endDate.value = date
+          endDate.value = setTimeFromDate(date, endDate.value)
           return
         }
 
@@ -434,11 +435,11 @@ const CCalendar = defineComponent({
         }
 
         selectEndDate.value = true
-        startDate.value = date
+        startDate.value = setTimeFromDate(date, startDate.value)
         return
       }
 
-      startDate.value = date
+      startDate.value = setTimeFromDate(date, startDate.value)
     }
 
     const handleCalendarKeyDown = (event: KeyboardEvent, date: Date, index?: number) => {
@@ -535,7 +536,7 @@ const CCalendar = defineComponent({
 
           setTimeout(() => {
             const _list: HTMLElement[] = getSelectableDates(
-              element.parentNode?.parentNode as HTMLDivElement,
+              element.parentNode?.parentNode as HTMLDivElement
             )
 
             if (_list.length > 0 && event.key === 'ArrowRight') {
@@ -581,6 +582,8 @@ const CCalendar = defineComponent({
         return
       }
 
+      date = setTimeFromDate(date, selectEndDate.value ? endDate.value : startDate.value)
+
       hoverDate.value = date
       emit('date-hover', getDateBySelectionType(date, props.selectionType))
     }
@@ -626,7 +629,7 @@ const CCalendar = defineComponent({
       const monthDetails = getMonthDetails(
         _calendarDate.getFullYear(),
         _calendarDate.getMonth(),
-        props.firstDayOfWeek,
+        props.firstDayOfWeek
       )
       const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
       const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4)
@@ -642,7 +645,7 @@ const CCalendar = defineComponent({
                 h(
                   'th',
                   { class: 'calendar-cell' },
-                  h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel),
+                  h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel)
                 ),
               weekDays.map(({ date }: { date: Date }) => {
                 return h(
@@ -664,11 +667,11 @@ const CCalendar = defineComponent({
                           })
                         : date
                             .toLocaleDateString(props.locale, { weekday: 'long' })
-                            .slice(0, props.weekdayFormat),
-                  ),
+                            .slice(0, props.weekdayFormat)
+                  )
                 )
               }),
-            ]),
+            ])
           ),
         h('tbody', {}, [
           view.value === 'days' &&
@@ -677,13 +680,13 @@ const CCalendar = defineComponent({
                 week.weekNumber === 0
                   ? `${_calendarDate.getFullYear()}W53`
                   : `${_calendarDate.getFullYear()}W${week.weekNumber}`,
-                props.selectionType,
+                props.selectionType
               )
               const isDisabled = isDateDisabled(
                 date,
                 minDate.value,
                 maxDate.value,
-                props.disabledDates,
+                props.disabledDates
               )
               const isSelected = isDateSelected(date, startDate.value, endDate.value)
               const current = week.days.some((day) => day.month === 'current')
@@ -721,14 +724,14 @@ const CCalendar = defineComponent({
                     h(
                       'th',
                       { class: 'calendar-cell-week-number' },
-                      week.weekNumber === 0 ? 53 : week.weekNumber,
+                      week.weekNumber === 0 ? 53 : week.weekNumber
                     ),
                   week.days.map(({ date, month }: { date: Date; month: string }) => {
                     const isDisabled = isDateDisabled(
                       date,
                       minDate.value,
                       maxDate.value,
-                      props.disabledDates,
+                      props.disabledDates
                     )
                     const isSelected = isDateSelected(date, startDate.value, endDate.value)
                     return month === 'current' || props.showAdjacementDays
@@ -787,12 +790,12 @@ const CCalendar = defineComponent({
                               ? props.dayFormat(date)
                               : date.toLocaleDateString(props.locale, {
                                   day: <'numeric' | '2-digit'>props.dayFormat,
-                                }),
-                          ),
+                                })
+                          )
                         )
                       : h('td')
                   }),
-                ],
+                ]
               )
             }),
           view.value === 'months' &&
@@ -807,7 +810,7 @@ const CCalendar = defineComponent({
                     date,
                     minDate.value,
                     maxDate.value,
-                    props.disabledDates,
+                    props.disabledDates
                   )
                   const isSelected = isMonthSelected(date, startDate.value, endDate.value)
                   return h(
@@ -837,9 +840,9 @@ const CCalendar = defineComponent({
                         onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
-                    h('div', { class: 'calendar-cell-inner' }, month),
+                    h('div', { class: 'calendar-cell-inner' }, month)
                   )
-                }),
+                })
               )
             }),
           view.value === 'years' &&
@@ -853,7 +856,7 @@ const CCalendar = defineComponent({
                     date,
                     minDate.value,
                     maxDate.value,
-                    props.disabledDates,
+                    props.disabledDates
                   )
                   const isSelected = isYearSelected(date, startDate.value, endDate.value)
                   return h(
@@ -883,9 +886,9 @@ const CCalendar = defineComponent({
                         onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
-                    h('div', { class: 'calendar-cell-inner' }, year),
+                    h('div', { class: 'calendar-cell-inner' }, year)
                   )
-                }),
+                })
               )
             }),
         ]),
@@ -917,7 +920,7 @@ const CCalendar = defineComponent({
                     slots.navPrevDoubleIcon
                       ? slots.navPrevDoubleIcon()
                       : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' }),
-                },
+                }
               ),
               view.value === 'days' &&
                 h(
@@ -936,9 +939,9 @@ const CCalendar = defineComponent({
                       slots.navPrevIcon
                         ? slots.navPrevIcon()
                         : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
-                  },
+                  }
                 ),
-            ],
+            ]
           ),
         h(
           'div',
@@ -958,7 +961,7 @@ const CCalendar = defineComponent({
                     if (props.navigation) view.value = 'months'
                   },
                 },
-                () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' }),
+                () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' })
               ),
             h(
               CButton,
@@ -970,9 +973,9 @@ const CCalendar = defineComponent({
                 },
                 ...(props.navYearFirst && { style: { order: '-1' } }),
               },
-              () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' }),
+              () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })
             ),
-          ],
+          ]
         ),
         props.navigation &&
           h(
@@ -998,7 +1001,7 @@ const CCalendar = defineComponent({
                       slots.navNextIcon
                         ? slots.navNextIcon()
                         : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
-                  },
+                  }
                 ),
               h(
                 CButton,
@@ -1016,9 +1019,9 @@ const CCalendar = defineComponent({
                     slots.navNextDoubleIcon
                       ? slots.navNextDoubleIcon()
                       : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' }),
-                },
+                }
               ),
-            ],
+            ]
           ),
       ])
     }
@@ -1044,7 +1047,7 @@ const CCalendar = defineComponent({
               Calendar(_calendarDate),
             ])
           }),
-        ],
+        ]
       )
   },
 })

package/src/components/calendar/utils.ts

@@ -80,7 +80,7 @@ export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTyp
  */
 export const getDateBySelectionType = (
   date: Date | null,
-  selectionType: SelectionTypes,
+  selectionType: SelectionTypes
 ): string | Date | null => {
   if (date === null) {
     return null
@@ -116,7 +116,7 @@ export const getFirstAvailableDateInRange = (
   endDate: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ): Date | null => {
   const _min = min ? new Date(Math.max(startDate.getTime(), min.getTime())) : startDate
   const _max = max ? new Date(Math.min(endDate.getTime(), max.getTime())) : endDate
@@ -158,7 +158,7 @@ export const getMonthsNames = (locale: string, format: 'short' | 'long' = 'short
  */
 export const getSelectableDates = (
   element: HTMLElement,
-  selector: string = 'tr[tabindex="0"], td[tabindex="0"]',
+  selector: string = 'tr[tabindex="0"], td[tabindex="0"]'
 ) => {
   return [...Element.prototype.querySelectorAll.call(element, selector)] as HTMLElement[]
 }
@@ -183,7 +183,7 @@ export const getYears = (year: number, range: number = 6): number[] => {
 const getLeadingDays = (
   year: number,
   month: number,
-  firstDayOfWeek: number,
+  firstDayOfWeek: number
 ): { date: Date; month: string }[] => {
   // 0: sunday
   // 1: monday
@@ -239,7 +239,7 @@ const getTrailingDays = (
   year: number,
   month: number,
   leadingDays: { date: Date; month: string }[],
-  monthDays: { date: Date; month: string }[],
+  monthDays: { date: Date; month: string }[]
 ) => {
   const dates = []
   const days = 42 - (leadingDays.length + monthDays.length)
@@ -283,7 +283,7 @@ export const getWeekNumber = (date: Date): number => {
 export const getMonthDetails = (
   year: number,
   month: number,
-  firstDayOfWeek: number,
+  firstDayOfWeek: number
 ): { weekNumber?: number; days: { date: Date; month: string }[] }[] => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
@@ -320,7 +320,7 @@ export const isDateDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ): boolean => {
   if (min && date < min) {
     return true
@@ -405,7 +405,7 @@ export const isDateSelected = (date: Date, start: Date | null, end: Date | null)
 export const isDisableDateInRange = (
   startDate?: Date | null,
   endDate?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ): boolean => {
   if (startDate && endDate) {
     const date = new Date(startDate)
@@ -437,7 +437,7 @@ export const isMonthDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ) => {
   const current = date.getFullYear() * 12 + date.getMonth()
   const _min = min ? min.getFullYear() * 12 + min.getMonth() : null
@@ -556,7 +556,7 @@ export const isYearDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  disabledDates?: DisabledDate | DisabledDate[],
+  disabledDates?: DisabledDate | DisabledDate[]
 ) => {
   const year = date.getFullYear()
   const minYear = min ? min.getFullYear() : null
@@ -638,3 +638,26 @@ export const removeTimeFromDate = (date: Date): Date => {
   clearedDate.setHours(0, 0, 0, 0)
   return clearedDate
 }
+
+/**
+ * Copies the time (hours, minutes, seconds, milliseconds) from one Date to another.
+ *
+ * @param {Date} target - The date whose time will be updated.
+ * @param {Date | null} source - The date to copy the time from.
+ * @returns {Date} A new Date instance with the date from `target` and time from `source`.
+ */
+export const setTimeFromDate = (target: Date, source: Date | null): Date => {
+  if (!(source instanceof Date)) {
+    return target
+  }
+
+  const result = new Date(target) // create a copy to avoid mutation
+  result.setHours(
+    source.getHours(),
+    source.getMinutes(),
+    source.getSeconds(),
+    source.getMilliseconds()
+  )
+
+  return result
+}

package/src/components/form/CFormControlWrapper.ts

@@ -7,6 +7,7 @@ import { CFormText } from './CFormText'
 import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
+  floatingClassName?: string
   floatingLabel?: string
   id?: string
   label?: string
@@ -18,6 +19,12 @@ const CFormControlWrapper = defineComponent({
   inheritAttrs: false,
   props: {
     ...CFormControlValidation.props,
+    /**
+     * A string of all className you want applied to the floating label wrapper.
+     *
+     * @since 5.5.0
+     */
+    floatingClassName: String,
     /**
      * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
      *
@@ -64,34 +71,41 @@ const CFormControlWrapper = defineComponent({
           ...(slots.feedbackValid && {
             feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
           }),
-        },
+        }
       )
 
     return () =>
       props.floatingLabel
-        ? h(CFormFloating, () => [
-            slots.default && slots.default(),
-            h(
-              CFormLabel,
-              {
-                for: props.id,
-              },
-              {
-                default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
-              },
-            ),
-            (props.text || slots.text) &&
+        ? h(
+            CFormFloating,
+            {
+              class: props.floatingClassName,
+            },
+            () => [
+              slots.default && slots.default(),
               h(
-                CFormText,
+                CFormLabel,
                 {
-                  id: props.describedby,
+                  for: props.id,
                 },
                 {
-                  default: () => (slots.text && slots.text()) || props.text,
-                },
+                  default: () =>
+                    (slots.label && slots.label()) || props.label || props.floatingLabel,
+                }
               ),
-            formControlValidation(),
-          ])
+              (props.text || slots.text) &&
+                h(
+                  CFormText,
+                  {
+                    id: props.describedby,
+                  },
+                  {
+                    default: () => (slots.text && slots.text()) || props.text,
+                  }
+                ),
+              formControlValidation(),
+            ]
+          )
         : [
             (props.label || slots.label) &&
               h(
@@ -101,7 +115,7 @@ const CFormControlWrapper = defineComponent({
                 },
                 {
                   default: () => (slots.label && slots.label()) || props.label,
-                },
+                }
               ),
             slots.default && slots.default(),
             (props.text || slots.text) &&
@@ -112,7 +126,7 @@ const CFormControlWrapper = defineComponent({
                 },
                 {
                   default: () => (slots.text && slots.text()) || props.text,
-                },
+                }
               ),
             formControlValidation(),
           ]

package/src/components/index.ts

@@ -30,6 +30,7 @@ export * from './multi-select'
 export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
+export * from './password-input'
 export * from './pagination'
 export * from './picker'
 export * from './placeholder'
@@ -41,6 +42,7 @@ export * from './sidebar'
 export * from './smart-pagination'
 export * from './smart-table'
 export * from './spinner'
+export * from './stepper'
 export * from './table'
 export * from './tabs'
 export * from './time-picker'