@coreui/vue-pro 5.10.0 → 5.12.0

package/dist/esm/utils/transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"transition.js","sources":["../../../src/utils/transition.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG,CAAC,QAAoB,KAAI;AACvC,IAAA,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;AAClC,QAAA,QAAQ,EAAE;;AAEd,CAAC;AAEM,MAAM,sBAAsB,GAAG,CACpC,QAAoB,EACpB,iBAA8B,EAC9B,iBAAiB,GAAG,IAAI,KACtB;IACF,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CAAC,QAAQ,CAAC;QACjB;;IAGF,MAAM,eAAe,GAAG,CAAC;IACzB,MAAM,gBAAgB,GAAG,gCAAgC,CAAC,iBAAiB,CAAC,GAAG,eAAe;IAE9F,IAAI,MAAM,GAAG,KAAK;AAElB,IAAA,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,EAAmB,KAAI;AAC9C,QAAA,IAAI,MAAM,KAAK,iBAAiB,EAAE;YAChC;;QAGF,MAAM,GAAG,IAAI;AACb,QAAA,iBAAiB,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;QAC/D,OAAO,CAAC,QAAQ,CAAC;AACnB,KAAC;AAED,IAAA,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC;IAC5D,UAAU,CAAC,MAAK;QACd,IAAI,CAAC,MAAM,EAAE;YACX,oBAAoB,CAAC,iBAAiB,CAAC;;KAE1C,EAAE,gBAAgB,CAAC;AACtB;AAEa,MAAA,gCAAgC,GAAG,CAAC,OAAoB,KAAI;IACvE,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC;;;AAIV,IAAA,IAAI,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;IAE9E,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC;IACrE,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC;;;IAIV,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI;AAC5F;AAEa,MAAA,oBAAoB,GAAG,CAAC,OAAoB,KAAI;IAC3D,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;AACnD;;;;"}
+{"version":3,"file":"transition.js","sources":["../../../src/utils/transition.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG,CAAC,QAAoB,KAAI;AACvC,IAAA,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;AAClC,QAAA,QAAQ,EAAE;;AAEd,CAAC;AAEM,MAAM,sBAAsB,GAAG,CACpC,QAAoB,EACpB,iBAA8B,EAC9B,iBAAiB,GAAG,IAAI,KACtB;IACF,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CAAC,QAAQ,CAAC;QACjB;;IAGF,MAAM,eAAe,GAAG,CAAC;IACzB,MAAM,gBAAgB,GAAG,gCAAgC,CAAC,iBAAiB,CAAC,GAAG,eAAe;IAE9F,IAAI,MAAM,GAAG,KAAK;AAElB,IAAA,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,EAAmB,KAAI;AAC9C,QAAA,IAAI,MAAM,KAAK,iBAAiB,EAAE;YAChC;;QAGF,MAAM,GAAG,IAAI;AACb,QAAA,iBAAiB,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;QAC/D,OAAO,CAAC,QAAQ,CAAC;AACnB,KAAC;AAED,IAAA,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC;IAC5D,UAAU,CAAC,MAAK;QACd,IAAI,CAAC,MAAM,EAAE;YACX,oBAAoB,CAAC,iBAAiB,CAAC;;KAE1C,EAAE,gBAAgB,CAAC;AACtB;AAEO,MAAM,gCAAgC,GAAG,CAAC,OAAoB,KAAI;IACvE,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC;;;AAIV,IAAA,IAAI,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;IAE9E,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC;IACrE,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC;;;IAIV,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI;AAC5F;AAEO,MAAM,oBAAoB,GAAG,CAAC,OAAoB,KAAI;IAC3D,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;AACnD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.10.0",
+  "version": "5.12.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,25 +41,25 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.8.0",
+    "@coreui/coreui-pro": "^5.14.2",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.3",
     "@types/jest": "^29.5.14",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.30.1",
+    "rollup": "^4.44.0",
     "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.4.0",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.17",
+    "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) as Date
+
       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,30 @@ 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 | null, source: Date | null): Date | null => {
+  if (target === null) {
+    return null
+  }
+
+  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/date-range-picker/utils.ts

@@ -1,7 +1,15 @@
+/**
+ * Generates input IDs or names based on the provided attributes, range, and position.
+ *
+ * @param attribute - A single string or a tuple of two strings representing the attribute names.
+ * @param range - A boolean indicating whether the input is part of a range.
+ * @param position - Optional. Specifies the position ('start' or 'end') when `range` is true.
+ * @returns A string representing the input ID or name.
+ */
 export const getInputIdOrName = (
   attribute: string | [string, string],
   range: boolean,
-  position?: 'start' | 'end',
+  position?: 'start' | 'end'
 ): string => {
   if (range && !Array.isArray(attribute)) {
     return `${attribute}-${position}-date`
@@ -14,11 +22,19 @@ export const getInputIdOrName = (
   return attribute
 }
 
-export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
-  if (!Number.isNaN(Date.parse(string))) {
-    return new Date(Date.parse(string))
-  }
-
+/**
+ * Parses a date string into a Date object based on the provided locale and time inclusion.
+ *
+ * @param dateString - The date string to parse.
+ * @param locale - The locale to use for parsing the date string.
+ * @param includeTime - Optional. Determines whether to include time in the parsed Date object.
+ * @returns A Date object representing the parsed date and time, or `undefined` if parsing fails.
+ */
+export const getLocalDateFromString = (
+  string: string,
+  locale: string,
+  time?: boolean
+): Date | undefined => {
   const date = new Date(2013, 11, 31, 17, 19, 22)
   let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
   regex = regex
@@ -48,17 +64,17 @@ export const getLocalDateFromString = (string: string, locale: string, time?: bo
           Number(partials.groups['month']) - 1,
           Number(partials.groups['day']),
           partials.groups['ampm']
-            ? (partials.groups['ampm'] === 'PM'
+            ? partials.groups['ampm'] === 'PM'
               ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour']))
+              : Number(partials.groups['hour'])
             : Number(partials.groups['hour']),
           Number(partials.groups['minute']),
-          Number(partials.groups['second']),
+          Number(partials.groups['second'])
         )
       : new Date(
           Number(partials.groups['year']),
           Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
+          Number(partials.groups['day'])
         ))
 
   return newDate

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(),
           ]