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

package/src/components/time-picker/CTimePicker.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, ref, watch } from 'vue'
+import { defineComponent, h, PropType, ref, watch } from 'vue'
 
 import { CButton } from '../button'
 import { CFormControlWrapper } from '../form/CFormControlWrapper'
@@ -17,9 +17,11 @@ import {
   isValidTime,
 } from './utils'
 
-import { Color } from '../props'
 import type { LocalizedTimePartials } from './types'
 
+import { useDebouncedCallback } from '../../composables'
+import { Color } from '../props'
+
 const CTimePicker = defineComponent({
   name: 'CTimePicker',
   props: {
@@ -146,6 +148,14 @@ const CTimePicker = defineComponent({
      * @since 4.6.0
      */
     feedbackValid: String,
+    /**
+     * Specify a list of available hours using an array, or customize the filtering of hours through a function.
+     *
+     * @since 5.0.0-rc.2
+     */
+    hours: {
+      type: [Array, Function] as PropType<number[] | ((hour: number) => number[])>,
+    },
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      */
@@ -157,6 +167,15 @@ const CTimePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-rc.2
+     */
+    inputOnChangeDelay: {
+      type: Number,
+      default: 750,
+    },
     /**
      * Toggle the readonly state for the component.
      */
@@ -183,6 +202,17 @@ const CTimePicker = defineComponent({
       type: String,
       defalut: 'default',
     },
+    /**
+     * Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.
+     *
+     * @since 5.0.0-rc.2
+     */
+    minutes: {
+      type: [Array, Boolean, Function] as PropType<
+        number[] | ((hour: number) => number[]) | boolean
+      >,
+      default: true,
+    },
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -197,12 +227,14 @@ const CTimePicker = defineComponent({
      */
     required: Boolean,
     /**
-     * Show seconds.
+     * Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.
      *
      * @since 4.7.0
      */
     seconds: {
-      type: Boolean,
+      type: [Array, Boolean, Function] as PropType<
+        number[] | ((hour: number) => number[]) | boolean
+      >,
       default: true,
     },
     /**
@@ -314,7 +346,13 @@ const CTimePicker = defineComponent({
     watch(
       date,
       () => {
-        localizedTimePartials.value = getLocalizedTimePartials(props.locale, props.ampm)
+        localizedTimePartials.value = getLocalizedTimePartials(
+          props.locale,
+          props.ampm,
+          props.hours,
+          props.minutes,
+          props.seconds,
+        )
 
         if (date.value) {
           ampm.value = getAmPm(new Date(date.value), props.locale)
@@ -398,11 +436,12 @@ const CTimePicker = defineComponent({
           autocomplete: 'off',
           class: 'time-picker-input',
           disabled: props.disabled,
-          onInput: (event: Event) => {
-            if (isValidTime((event.target as HTMLInputElement).value)) {
-              date.value = convertTimeToDate((event.target as HTMLInputElement).value)
-            }
-          },
+          onInput: (event: Event) =>
+            useDebouncedCallback(() => {
+              if (isValidTime((event.target as HTMLInputElement).value)) {
+                date.value = convertTimeToDate((event.target as HTMLInputElement).value)
+              }
+            }, props.inputOnChangeDelay),
           placeholder: props.placeholder,
           readonly: props.inputReadOnly,
           ref: inputRef,
@@ -410,7 +449,9 @@ const CTimePicker = defineComponent({
           value: date.value
             ? date.value.toLocaleTimeString(props.locale, {
                 hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
-                ...(!props.seconds && { timeStyle: 'short' }),
+                hour: 'numeric',
+                ...(props.minutes && { minute: 'numeric' }),
+                ...(props.seconds && { second: 'numeric' }),
               })
             : '',
         }),
@@ -445,27 +486,28 @@ const CTimePicker = defineComponent({
             ),
           ),
       ),
-      ':',
-      h(
-        'select',
-        {
-          class: 'time-picker-inline-select',
-          disabled: props.disabled,
-          onChange: (event: Event) =>
-            handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
-          ...(date.value && { value: getSelectedMinutes(date.value) }),
-        },
-        localizedTimePartials.value &&
-          localizedTimePartials.value.listOfMinutes?.map((option) =>
-            h(
-              'option',
-              {
-                value: option.value.toString(),
-              },
-              option.label,
+      props.minutes && ':',
+      props.minutes &&
+        h(
+          'select',
+          {
+            class: 'time-picker-inline-select',
+            disabled: props.disabled,
+            onChange: (event: Event) =>
+              handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
+            ...(date.value && { value: getSelectedMinutes(date.value) }),
+          },
+          localizedTimePartials.value &&
+            localizedTimePartials.value.listOfMinutes?.map((option) =>
+              h(
+                'option',
+                {
+                  value: option.value.toString(),
+                },
+                option.label,
+              ),
             ),
-          ),
-      ),
+        ),
       props.seconds && ':',
       props.seconds &&
         h(
@@ -524,11 +566,12 @@ const CTimePicker = defineComponent({
         onClick: (index: number) => handleTimeChange('hours', index.toString()),
         selected: getSelectedHour(date.value, props.locale, props.ampm),
       }),
-      h(CTimePickerRollCol, {
-        elements: localizedTimePartials.value && localizedTimePartials.value.listOfMinutes,
-        onClick: (index: number) => handleTimeChange('minutes', index.toString()),
-        selected: getSelectedMinutes(date.value),
-      }),
+      props.minutes &&
+        h(CTimePickerRollCol, {
+          elements: localizedTimePartials.value && localizedTimePartials.value.listOfMinutes,
+          onClick: (index: number) => handleTimeChange('minutes', index.toString()),
+          selected: getSelectedMinutes(date.value),
+        }),
       props.seconds &&
         h(CTimePickerRollCol, {
           elements: localizedTimePartials.value && localizedTimePartials.value.listOfSeconds,

package/src/components/time-picker/utils.ts

@@ -1,130 +1,194 @@
 import type { LocalizedTimePartials } from './types'
 
+/**
+ * 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.
+ */
 export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
   if (abbr === 'am' && hour === 12) {
     return 0
   }
+
   if (abbr === 'am') {
     return hour
   }
+
   if (abbr === 'pm' && hour === 12) {
     return 12
   }
+
   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.
+ */
 export const convert24hTo12h = (hour: number) => hour % 12 || 12
 
+/**
+ * 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.
+ */
 export const convertTimeToDate = (time: Date | string | null | undefined) =>
-  time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null
+  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.
+ */
 export const getAmPm = (date: Date, locale: string) => {
   if (date.toLocaleTimeString(locale).includes('AM')) {
     return 'am'
   }
+
   if (date.toLocaleTimeString(locale).includes('PM')) {
     return 'pm'
   }
+
   return date.getHours() >= 12 ? 'pm' : 'am'
 }
 
-// TODO: clean-up
-export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto') =>
-  Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {
-    return {
-      value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
-      label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(
-        locale,
-      ),
-    }
+/**
+ * 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.
+ */
+export const formatTimePartials = (
+  values: number[],
+  locale: string,
+  partial: 'hour' | 'minute' | 'second',
+) => {
+  const date = new Date()
+
+  const formatter = new Intl.DateTimeFormat(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
   })
 
-// TODO: clean-up
-export const getListOfMinutes = (locale: string, valueAsString = false) =>
-  Array.from({ length: 60 }, (_, i) => {
-    const d = new Date()
-    d.setMinutes(i)
-    return {
-      value: valueAsString ? i.toString() : i,
-      label: d
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+  return values.map((value) => {
+    if (partial === 'hour') {
+      date.setHours(value)
+    }
+
+    if (partial === 'minute') {
+      date.setMinutes(value)
+    }
+
+    if (partial === 'second') {
+      date.setSeconds(value)
     }
-  })
 
-// TODO: clean-up
-export const getListOfSeconds = (locale: string, valueAsString = false) =>
-  Array.from({ length: 60 }, (_, i) => {
-    const d = new Date()
-    d.setSeconds(i)
     return {
-      value: valueAsString ? i.toString() : i,
-      label: d
-        .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.
+ */
 export const getLocalizedTimePartials = (
   locale: string,
   ampm: 'auto' | boolean = 'auto',
+  hours: boolean | number[] | ((hour: number) => number[]) = [],
+  minutes: boolean | number[] | ((minute: number) => number[]) = [],
+  seconds: boolean | number[] | ((second: number) => number[]) = [],
 ): LocalizedTimePartials => {
-  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 listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {
-    date.setMinutes(i)
-    return {
-      value: i,
-      label: date
-        .toLocaleTimeString(locale, {
-          minute: '2-digit',
-          second: '2-digit',
-        })
-        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
-    }
-  })
+  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.
+ */
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
   ampm: 'auto' | boolean = '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.
+ */
 export const getSelectedMinutes = (date: Date | null) => (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.
+ */
 export const getSelectedSeconds = (date: Date | null) => (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.
+ */
 export const isAmPm = (locale: string) =>
   ['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.
+ */
 export const isValidTime = (time: string) => {
   const d = new Date(`1970-01-01 ${time}`)
   return d instanceof Date && d.getTime()

package/src/components/toast/CToastClose.ts

@@ -7,7 +7,7 @@ const CToastClose = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: String,
+    as: String,
     ...CCloseButton.props,
   },
   emits: [
@@ -24,9 +24,9 @@ const CToastClose = defineComponent({
       updateVisible(false)
     }
     return () =>
-      props.component
+      props.as
         ? h(
-            props.component,
+            props.as,
             {
               onClick: () => {
                 handleClose()

package/src/components/toast/__tests__/CToastClose.spec.ts

@@ -21,7 +21,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: CButton,
+    as: CButton,
   },
   slots: {
     default: 'Default slot',

package/src/components/tooltip/CTooltip.ts

@@ -1,11 +1,11 @@
-import { defineComponent, h, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getUID } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -23,7 +23,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.0
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -113,6 +113,7 @@ const CTooltip = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const tooltipRef = ref()
+    const uID = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
 
@@ -143,6 +144,10 @@ const CTooltip = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    onMounted(() => {
+      uID.value = getUID('tooltip')
+    })
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -202,6 +207,7 @@ const CTooltip = defineComponent({
                       },
                       attrs.class,
                     ],
+                    id: uID.value,
                     ref: tooltipRef,
                     role: 'tooltip',
                   },
@@ -222,6 +228,7 @@ const CTooltip = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
+          id: visible.value ? uID.value : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),

package/src/components/virtual-scroller/CVirtualScroller.ts

@@ -94,7 +94,7 @@ const CVirtualScroller = defineComponent({
                   }),
                 },
                 ref: (node) => {
-                  if (node && (node as HTMLElement).offsetHeight) {
+                  if (itemHeight.value === 0 && node && (node as HTMLElement).offsetHeight) {
                     itemHeight.value =
                       (node as HTMLElement).offsetHeight +
                       Number.parseFloat(getComputedStyle(node as HTMLElement).marginTop) +

package/src/directives/v-c-popover.ts

@@ -1,6 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
+import type { Options } from '@popperjs/core'
+
 import { getUID } from '../utils'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
@@ -14,8 +16,13 @@ const createPopoverElement = (id: string, header: string, content: string): HTML
   return popover
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const addPopoverElement = (
+  el: HTMLElement,
+  popover: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
+  el.setAttribute('aria-describedby', uID)
   document.body.appendChild(popover)
   createPopper(el, popover, popperOptions)
   setTimeout(() => {
@@ -23,21 +30,26 @@ const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptio
   }, 1)
 }
 
-const removePopoverElement = (popover: HTMLDivElement) => {
+const removePopoverElement = (el: HTMLElement, popover: HTMLDivElement) => {
+  el.removeAttribute('aria-describedby')
   popover.classList.remove('show')
   setTimeout(() => {
     popover.remove()
   }, 300)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const togglePopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const togglePopoverElement = (
+  el: HTMLElement,
+  popover: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
   const popperElement = document.getElementById(popover.id)
   if (popperElement && popperElement.classList.contains('show')) {
-    removePopoverElement(popover)
+    removePopoverElement(el, popover)
     return
   }
-  addPopoverElement(popover, el, popperOptions)
+  addPopoverElement(el, popover, popperOptions, uID)
 }
 
 export default {
@@ -65,30 +77,30 @@ export default {
       ],
     }
 
-    const popoverUID = getUID('popover')
-    binding.arg = popoverUID
-    const popover = createPopoverElement(popoverUID, header, content)
+    const uID = getUID('popover')
+    binding.arg = uID
+    const popover = createPopoverElement(uID, header, content)
 
     trigger.includes('click') &&
       el.addEventListener('click', () => {
-        togglePopoverElement(popover, el, popperOptions)
+        togglePopoverElement(el, popover, popperOptions, uID)
       })
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
-        addPopoverElement(popover, el, popperOptions)
+        addPopoverElement(el, popover, popperOptions, uID)
       })
       el.addEventListener('blur', () => {
-        removePopoverElement(popover)
+        removePopoverElement(el, popover)
       })
     }
 
     if (trigger.includes('hover')) {
       el.addEventListener('mouseenter', () => {
-        addPopoverElement(popover, el, popperOptions)
+        addPopoverElement(el, popover, popperOptions, uID)
       })
       el.addEventListener('mouseleave', () => {
-        removePopoverElement(popover)
+        removePopoverElement(el, popover)
       })
     }
   },