@coreui/vue-pro 5.0.0-rc.1 → 5.0.0-rc.2

package/dist/esm/components/time-picker/utils.js

@@ -1,3 +1,9 @@
+/**
+ * Converts a 12-hour time format to a 24-hour time format.
+ * @param {('am' | 'pm')} abbr The abbreviation indicating AM or PM.
+ * @param {number} hour The hour to be converted.
+ * @returns {number} The hour in 24-hour format.
+ */
 const convert12hTo24h = (abbr, hour) => {
     if (abbr === 'am' && hour === 12) {
         return 0;
@@ -10,8 +16,24 @@ const convert12hTo24h = (abbr, hour) => {
     }
     return hour + 12;
 };
+/**
+ * Converts a 24-hour time format to a 12-hour format.
+ * @param {number} hour The hour to be converted.
+ * @returns {number} The hour in 12-hour format.
+ */
 const convert24hTo12h = (hour) => hour % 12 || 12;
-const convertTimeToDate = (time) => time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null;
+/**
+ * Converts a time input into a Date object.
+ * @param {Date | string | null | undefined} time The time input to be converted.
+ * @returns {Date | null} The converted Date object or null if the input is falsy.
+ */
+const convertTimeToDate = (time) => time ? (time instanceof Date ? time : new Date(`1970-01-01 ${time}`)) : null;
+/**
+ * Retrieves the AM/PM part of the specified date according to the given locale.
+ * @param {Date} date The date from which to extract the AM/PM part.
+ * @param {string} locale The locale to use for formatting.
+ * @returns {string} 'am' or 'pm' based on the given date and locale.
+ */
 const getAmPm = (date, locale) => {
     if (date.toLocaleTimeString(locale).includes('AM')) {
         return 'am';
@@ -21,46 +43,108 @@ const getAmPm = (date, locale) => {
     }
     return date.getHours() >= 12 ? 'pm' : 'am';
 };
-const getLocalizedTimePartials = (locale, ampm = 'auto') => {
+/**
+ * Formats an array of time values (hours, minutes, or seconds) according to the specified locale and partial.
+ * @param {number[]} values An array of time values to format.
+ * @param {string} locale The locale to use for formatting.
+ * @param {('hour' | 'minute' | 'second')} partial The type of time value to format.
+ * @returns {Array} An array of objects with the original value and its localized label.
+ */
+const formatTimePartials = (values, locale, partial) => {
     const date = new Date();
-    const hour12 = ['am', 'AM', 'pm', 'PM'].some((el) => date.toLocaleString(locale).includes(el));
-    const listOfHours = Array.from({ length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 }, (_, i) => {
-        return {
-            value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,
-            label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),
-        };
+    const formatter = new Intl.DateTimeFormat(locale, {
+        hour: 'numeric',
+        minute: '2-digit',
+        second: '2-digit',
     });
-    const listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {
-        date.setMinutes(i);
+    return values.map((value) => {
+        if (partial === 'hour') {
+            date.setHours(value);
+        }
+        if (partial === 'minute') {
+            date.setMinutes(value);
+        }
+        if (partial === 'second') {
+            date.setSeconds(value);
+        }
         return {
-            value: i,
-            label: date
-                .toLocaleTimeString(locale, {
-                minute: '2-digit',
-                second: '2-digit',
-            })
-                .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+            value,
+            label: formatter.formatToParts(date).find((part) => part.type === partial)?.value || '',
         };
     });
+};
+/**
+ * Generates localized time partials (hours, minutes, seconds) based on the given parameters.
+ * @param {string} locale The locale to use for generating localized time partials.
+ * @param {'auto' | boolean} ampm Determines whether to use 12-hour or 24-hour format. 'auto' decides based on locale.
+ * @param {boolean | number[] | Function} hours An array of hours, a boolean, or a function to generate hours.
+ * @param {boolean | number[] | Function} minutes An array of minutes, a boolean, or a function to generate minutes.
+ * @param {boolean | number[] | Function} seconds An array of seconds, a boolean, or a function to generate seconds.
+ * @returns {LocalizedTimePartials} An object containing arrays of localized time partials and a boolean indicating if 12-hour format is used.
+ */
+const getLocalizedTimePartials = (locale, ampm = 'auto', hours = [], minutes = [], seconds = []) => {
+    const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true;
+    const listOfHours = Array.isArray(hours) && hours.length > 0
+        ? hours
+        : (typeof hours === 'function'
+            ? Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)).filter((hour) => hours(hour))
+            : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)));
+    const listOfMinutes = Array.isArray(minutes) && minutes.length > 0
+        ? minutes
+        : (typeof minutes === 'function'
+            ? Array.from({ length: 60 }, (_, i) => i).filter((minute) => minutes(minute))
+            : Array.from({ length: 60 }, (_, i) => i));
+    const listOfSeconds = Array.isArray(seconds) && seconds.length > 0
+        ? seconds
+        : (typeof seconds === 'function'
+            ? Array.from({ length: 60 }, (_, i) => i).filter((second) => seconds(second))
+            : Array.from({ length: 60 }, (_, i) => i));
     return {
-        listOfHours,
-        listOfMinutes: listOfMinutesSeconds,
-        listOfSeconds: listOfMinutesSeconds,
+        listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
+        listOfMinutes: formatTimePartials(listOfMinutes, locale, 'minute'),
+        listOfSeconds: formatTimePartials(listOfSeconds, locale, 'second'),
         hour12,
     };
 };
+/**
+ * Gets the selected hour from a date object in either 12-hour or 24-hour format based on locale and preference.
+ * @param {Date | null} date The date object from which to extract the hour. If null, the function returns an empty string.
+ * @param {string} locale The locale to use when determining whether to return in 12-hour or 24-hour format.
+ * @param {'auto' | boolean} ampm Determines the format of the hour returned. 'auto' decides based on locale, true forces 12-hour format, and false forces 24-hour format.
+ * @returns {string | number} The hour in the specified format or an empty string if the date is null.
+ */
 const getSelectedHour = (date, locale, ampm = 'auto') => date
-    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
+    ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
         ? convert24hTo12h(date.getHours())
-        : date.getHours()
+        : date.getHours())
     : '';
+/**
+ * Gets the selected minutes from a date object.
+ * @param {Date | null} date The date object from which to extract the minutes. If null, the function returns an empty string.
+ * @returns {string | number} The minutes from the date or an empty string if the date is null.
+ */
 const getSelectedMinutes = (date) => (date ? date.getMinutes() : '');
+/**
+ * Gets the selected seconds from a date object.
+ * @param {Date | null} date The date object from which to extract the seconds. If null, the function returns an empty string.
+ * @returns {string | number} The seconds from the date or an empty string if the date is null.
+ */
 const getSelectedSeconds = (date) => (date ? date.getSeconds() : '');
+/**
+ * Determines if the given locale uses AM/PM format.
+ * @param {string} locale The locale to check.
+ * @returns {boolean} True if the locale uses AM/PM format, otherwise false.
+ */
 const isAmPm = (locale) => ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el));
+/**
+ * Validates if the given string represents a valid time.
+ * @param {string} time The time string to validate.
+ * @returns {boolean} True if the string is a valid time, otherwise false.
+ */
 const isValidTime = (time) => {
     const d = new Date(`1970-01-01 ${time}`);
     return d instanceof Date && d.getTime();
 };
 
-export { convert12hTo24h, convert24hTo12h, convertTimeToDate, getAmPm, getLocalizedTimePartials, getSelectedHour, getSelectedMinutes, getSelectedSeconds, isAmPm, isValidTime };
+export { convert12hTo24h, convert24hTo12h, convertTimeToDate, formatTimePartials, getAmPm, getLocalizedTimePartials, getSelectedHour, getSelectedMinutes, getSelectedSeconds, isAmPm, isValidTime };
 //# sourceMappingURL=utils.js.map

package/dist/esm/components/time-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/time-picker/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/time-picker/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/tooltip/CTooltip.d.ts

@@ -14,7 +14,7 @@ declare const CTooltip: import("vue").DefineComponent<{
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
         type: PropType<string | HTMLElement | (() => HTMLElement)>;
@@ -92,7 +92,7 @@ declare const CTooltip: import("vue").DefineComponent<{
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
         type: PropType<string | HTMLElement | (() => HTMLElement)>;

package/dist/esm/components/tooltip/CTooltip.js

@@ -21,7 +21,7 @@ const CTooltip = defineComponent({
         /**
          * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
          *
-         * @since v5.0.0-rc.1
+         * @since v5.0.0-rc.2
          */
         container: {
             type: [Object, String],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.0.0-rc.1",
+    "@coreui/coreui-pro": "^5.0.0-rc.2",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {

package/src/components/accordion/CAccordion.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, provide, ref } from 'vue'
+import { defineComponent, h, provide, ref, watch } from 'vue'
 
 const CAccordion = defineComponent({
   name: 'CAccordion',
@@ -21,6 +21,12 @@ const CAccordion = defineComponent({
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
     }
+
+    watch(
+      () => props.activeItemKey,
+      (value) => (activeItemKey.value = value),
+    )
+
     provide('activeItemKey', activeItemKey)
     provide('alwaysOpen', props.alwaysOpen)
     provide('setActiveItemKey', setActiveItemKey)

package/src/components/badge/CBadge.ts

@@ -61,7 +61,7 @@ const CBadge = defineComponent({
           class: [
             'badge',
             {
-              [`bg-${props.color}`]: props.color,
+              [`text-bg-${props.color}`]: props.color,
               'position-absolute translate-middle': props.position,
               'top-0': props.position && props.position.includes('top'),
               'top-100': props.position && props.position.includes('bottom'),

package/src/components/calendar/CCalendar.ts

@@ -124,7 +124,7 @@ const CCalendar = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -143,7 +143,7 @@ const CCalendar = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     showWeekNumber: Boolean,
     /**
@@ -174,7 +174,7 @@ const CCalendar = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     weekNumbersLabel: String,
   },

package/src/components/conditional-teleport/CConditionalTeleport.ts

@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

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

@@ -183,19 +183,19 @@ const CDatePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     inputOnChangeDelay: {
       type: Number,
@@ -249,7 +249,7 @@ const CDatePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -268,7 +268,7 @@ const CDatePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     showWeekNumber: Boolean,
     /**
@@ -311,7 +311,7 @@ const CDatePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     weekNumbersLabel: String,
   },

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -214,19 +214,19 @@ const CDateRangePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     inputOnChangeDelay: {
       type: Number,
@@ -316,7 +316,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -335,7 +335,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     showWeekNumber: Boolean,
     /**
@@ -453,7 +453,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     weekNumbersLabel: String,
   },

package/src/components/dropdown/CDropdown.ts

@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     teleport: {
       type: Boolean,

package/src/components/dropdown/CDropdownToggle.ts

@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     navLink: {
       type: Boolean,

package/src/components/form/CFormCheck.ts

@@ -189,7 +189,7 @@ const CFormCheck = defineComponent({
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...((props.modelValue || props.value) && { checked: isChecked.value }),
+        ...(props.modelValue && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -236,26 +236,26 @@ const CFormCheck = defineComponent({
       props.button
         ? [formControl(), (slots.label || props.label) && formLabel(), formValidation()]
         : props.label
-        ? props.hitArea
-          ? [
-              h(
-                CFormLabel,
+          ? props.hitArea
+            ? [
+                h(
+                  CFormLabel,
+                  {
+                    customClassName: className,
+                    ...(props.id && { for: props.id }),
+                  },
+                  [formControl(), props.label],
+                ),
+                formValidation(),
+              ]
+            : h(
+                'div',
                 {
-                  customClassName: className,
-                  ...(props.id && { for: props.id }),
+                  class: className,
                 },
-                [formControl(), props.label],
-              ),
-              formValidation(),
-            ]
-          : h(
-              'div',
-              {
-                class: className,
-              },
-              [formControl(), props.label && formLabel(), formValidation()],
-            )
-        : formControl()
+                [formControl(), props.label && formLabel(), formValidation()],
+              )
+          : formControl()
   },
 })
 

package/src/components/form/CFormSwitch.ts

@@ -94,6 +94,7 @@ const CFormSwitch = defineComponent({
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
               },
+              attrs.class,
             ],
             id: props.id,
             onChange: (event: InputEvent) => handleChange(event),

package/src/components/form/CFormTextarea.ts

@@ -133,6 +133,7 @@ const CFormTextarea = defineComponent({
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
                   },
+                  attrs.class,
                 ],
                 onChange: (event: InputEvent) => handleChange(event),
                 onInput: (event: InputEvent) => handleInput(event),

package/src/components/modal/CModal.ts

@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     focus: {
       type: Boolean,

package/src/components/offcanvas/COffcanvas.ts

@@ -7,6 +7,7 @@ import { executeAfterTransition } from '../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a backdrop on body while offcanvas is open.
@@ -94,7 +95,7 @@ const COffcanvas = defineComponent({
      */
     'show',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { attrs, emit, slots }) {
     const offcanvasRef = ref()
     const visible = ref(props.visible)
 
@@ -175,6 +176,7 @@ const COffcanvas = defineComponent({
             h(
               'div',
               {
+                ...attrs,
                 class: [
                   {
                     [`offcanvas${
@@ -182,6 +184,7 @@ const COffcanvas = defineComponent({
                     }`]: props.responsive,
                     [`offcanvas-${props.placement}`]: props.placement,
                   },
+                  attrs.class,
                 ],
                 onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
                 ref: offcanvasRef,

package/src/components/popover/CPopover.ts

@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

package/src/components/progress/CProgress.ts

@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     progressBarClassName: String,
     /**