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

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.3
+     */
+    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.3
+     */
+    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.3
+     */
+    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/index.ts

@@ -3,7 +3,7 @@ import { CTimePicker } from './CTimePicker'
 
 const CTimePickerPlugin = {
   install: (app: App): void => {
-    app.component(CTimePicker.name, CTimePicker)
+    app.component(CTimePicker.name as string, CTimePicker)
   },
 }
 

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/index.ts

@@ -7,11 +7,11 @@ import { CToastHeader } from './CToastHeader'
 
 const CToastPlugin = {
   install: (app: App): void => {
-    app.component(CToast.name, CToast)
-    app.component(CToastBody.name, CToastBody)
-    app.component(CToastClose.name, CToastClose)
-    app.component(CToaster.name, CToaster)
-    app.component(CToastHeader.name, CToastHeader)
+    app.component(CToast.name as string, CToast)
+    app.component(CToastBody.name as string, CToastBody)
+    app.component(CToastClose.name as string, CToastClose)
+    app.component(CToaster.name as string, CToaster)
+    app.component(CToastHeader.name as string, CToastHeader)
   },
 }
 

package/src/components/tooltip/CTooltip.ts

@@ -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.1
+     * @since v5.0.0-rc.3
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

package/src/components/tooltip/index.ts

@@ -3,7 +3,7 @@ import { CTooltip } from './CTooltip'
 
 const CTooltipPlugin = {
   install: (app: App): void => {
-    app.component(CTooltip.name, CTooltip)
+    app.component(CTooltip.name as string, CTooltip)
   },
 }
 

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

@@ -3,7 +3,7 @@ import { CVirtualScroller } from './CVirtualScroller'
 
 const CVirtualScrollerPlugin = {
   install: (app: App): void => {
-    app.component(CVirtualScroller.name, CVirtualScroller)
+    app.component(CVirtualScroller.name as string, CVirtualScroller)
   },
 }
 

package/src/components/widgets/index.ts

@@ -8,12 +8,12 @@ import { CWidgetStatsF } from './CWidgetStatsF'
 
 const CWidgetsStatsPlugin = {
   install: (app: App): void => {
-    app.component(CWidgetStatsA.name, CWidgetStatsA)
-    app.component(CWidgetStatsB.name, CWidgetStatsB)
-    app.component(CWidgetStatsC.name, CWidgetStatsC)
-    app.component(CWidgetStatsD.name, CWidgetStatsD)
-    app.component(CWidgetStatsE.name, CWidgetStatsE)
-    app.component(CWidgetStatsF.name, CWidgetStatsF)
+    app.component(CWidgetStatsA.name as string, CWidgetStatsA)
+    app.component(CWidgetStatsB.name as string, CWidgetStatsB)
+    app.component(CWidgetStatsC.name as string, CWidgetStatsC)
+    app.component(CWidgetStatsD.name as string, CWidgetStatsD)
+    app.component(CWidgetStatsE.name as string, CWidgetStatsE)
+    app.component(CWidgetStatsF.name as string, CWidgetStatsF)
   },
 }