@coreui/vue-pro 4.10.4 → 5.0.0-alpha.1

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

@@ -1,7 +1,5 @@
 import { defineComponent, h, onMounted, PropType, ref, watch } from 'vue'
 
-import { format as dateFormat } from 'date-fns'
-
 import { CButton } from '../button'
 import { CCalendar } from '../calendar'
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
@@ -10,6 +8,7 @@ import { CTimePicker } from '../time-picker'
 
 import { getLocalDateFromString } from './utils'
 
+import { useDebouncedCallback } from '../../composables'
 import { Color } from '../props'
 
 const CDateRangePicker = defineComponent({
@@ -216,6 +215,27 @@ const CDateRangePicker = defineComponent({
      * Toggle the readonly state for the component.
      */
     inputReadOnly: Boolean,
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateFormat: Function,
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateParse: Function,
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputOnChangeDelay: {
+      type: Number,
+      default: 750,
+    },
     /**
      * Set component validation state to invalid.
      *
@@ -293,6 +313,16 @@ const CDateRangePicker = defineComponent({
      * @since 4.9.0
      */
     selectAdjacementDays: Boolean,
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+      type: String as PropType<'day' | 'week' | 'month' | 'year'>,
+      default: 'day',
+      validator: (value: string) => ['day', 'week', 'month', 'year'].includes(value),
+    },
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -302,6 +332,12 @@ const CDateRangePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: Boolean,
     /**
      * Default icon or character character that separates two dates.
      */
@@ -414,6 +450,12 @@ const CDateRangePicker = defineComponent({
         return false
       },
     },
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: String,
   },
   emits: [
     /**
@@ -458,29 +500,22 @@ const CDateRangePicker = defineComponent({
     const inputStartRef = ref()
     const formRef = ref()
 
+    const calendarDate = ref<Date | string | null>(props.calendarDate ?? null)
+    const endDate = ref<Date | string | null>(props.endDate ?? null)
+    const maxDate = ref<Date | string | null>(props.maxDate ?? null)
+    const minDate = ref<Date | string | null>(props.minDate ?? null)
+    const startDate = ref<Date | string | null>(props.startDate ?? null)
     const visible = ref(props.visible)
-    const calendarDate = ref<Date>(
-      props.calendarDate
-        ? new Date(props.calendarDate)
-        : props.startDate
-        ? new Date(props.startDate)
-        : props.endDate
-        ? new Date(props.endDate)
-        : new Date(),
-    )
-    const inputStartHoverValue = ref<Date | null>(null)
-    const inputEndHoverValue = ref<Date | null>(null)
-    const startDate = ref<Date | null>(props.startDate ? new Date(props.startDate) : null)
-    const endDate = ref<Date | null>(props.endDate ? new Date(props.endDate) : null)
-    const initialStartDate = ref<Date | null>(startDate.value ? new Date(startDate.value) : null)
-    const initialEndDate = ref<Date | null>(endDate.value ? new Date(endDate.value) : null)
-    const maxDate = ref(props.maxDate && new Date(props.maxDate))
-    const minDate = ref(props.minDate && new Date(props.minDate))
-    const selectEndDate = ref(false)
+
+    const initialStartDate = ref<Date | string | null>(props.startDate ?? null)
+    const initialEndDate = ref<Date | string | null>(props.endDate ?? null)
+    const inputStartHoverValue = ref<Date | string | null>(null)
+    const inputEndHoverValue = ref<Date | string | null>(null)
     const isValid = ref<boolean | undefined>(
       props.valid ?? (props.invalid === true ? false : undefined),
     )
     const isMobile = ref(false)
+    const selectEndDate = ref(false)
 
     onMounted(() => {
       isMobile.value = window.innerWidth < 768
@@ -497,9 +532,8 @@ const CDateRangePicker = defineComponent({
       () => props.startDate,
       () => {
         if (props.startDate) {
-          const date = new Date(props.startDate)
-          calendarDate.value = date
-          startDate.value = date
+          calendarDate.value = props.startDate
+          startDate.value = props.startDate
         }
       },
     )
@@ -508,9 +542,8 @@ const CDateRangePicker = defineComponent({
       () => props.endDate,
       () => {
         if (props.endDate) {
-          const date = new Date(props.endDate)
-          calendarDate.value = date
-          endDate.value = date
+          calendarDate.value = props.endDate
+          endDate.value = props.endDate
         }
       },
     )
@@ -519,7 +552,7 @@ const CDateRangePicker = defineComponent({
       () => props.maxDate,
       () => {
         if (props.maxDate) {
-          maxDate.value = new Date(props.maxDate)
+          maxDate.value = props.maxDate
         }
       },
     )
@@ -528,7 +561,7 @@ const CDateRangePicker = defineComponent({
       () => props.minDate,
       () => {
         if (props.minDate) {
-          minDate.value = new Date(props.minDate)
+          minDate.value = props.minDate
         }
       },
     )
@@ -549,15 +582,21 @@ const CDateRangePicker = defineComponent({
       }
     })
 
-    const formatDate = (date: Date) => {
-      return props.format
-        ? dateFormat(date, props.format)
+    const formatDate = (date: Date | string) => {
+      if (props.selectionType !== 'day') {
+        return date
+      }
+
+      const _date = new Date(date)
+
+      return props.inputDateFormat
+        ? props.inputDateFormat(_date)
         : props.timepicker
-        ? date.toLocaleString(props.locale)
-        : date.toLocaleDateString(props.locale)
+        ? _date.toLocaleString(props.locale)
+        : _date.toLocaleDateString(props.locale)
     }
 
-    const setInputValue = (date: Date | null) => {
+    const setInputValue = (date: Date | string | null) => {
       if (date) {
         return formatDate(date)
       }
@@ -565,21 +604,13 @@ const CDateRangePicker = defineComponent({
       return ''
     }
 
-    const handleCalendarCellHover = (date: Date | null) => {
+    const handleDateHover = (date: Date | string | null) => {
       if (selectEndDate.value) {
         inputEndHoverValue.value = date
         return
       }
-      inputStartHoverValue.value = date
-    }
-
-    const handleCalendarDateChange = (date: Date, difference?: number) => {
-      if (difference) {
-        calendarDate.value = new Date(date.getFullYear(), date.getMonth() - difference, 1)
-        return
-      }
 
-      calendarDate.value = date
+      inputStartHoverValue.value = date
     }
 
     const handleFormValidation = (form: HTMLFormElement) => {
@@ -645,23 +676,31 @@ const CDateRangePicker = defineComponent({
       emit('update:end-date', null)
     }
 
+    const handleOnChange = (value: string, input: string) => {
+      const date = props.inputDateParse
+        ? props.inputDateParse(value)
+        : getLocalDateFromString(value, props.locale, props.timepicker)
+      if (date instanceof Date && date.getTime()) {
+        calendarDate.value = date
+        if (input === 'start') {
+          startDate.value = date
+        } else {
+          endDate.value = date
+        }
+      }
+    }
+
     const InputGroup = () =>
       h(
         'div',
         {
-          class: [
-            'input-group',
-            'picker-input-group',
-            {
-              [`input-group-${props.size}`]: props.size,
-            },
-          ],
+          class: 'date-picker-input-group',
         },
         [
           h('input', {
             autocomplete: 'off',
             class: [
-              'form-control date-picker-input',
+              'date-picker-input',
               {
                 hover: inputStartHoverValue.value,
               },
@@ -671,17 +710,13 @@ const CDateRangePicker = defineComponent({
             onClick: () => {
               selectEndDate.value = false
             },
-            onInput: (event: Event) => {
-              const date = getLocalDateFromString(
-                (event.target as HTMLInputElement).value,
-                props.locale,
-                props.timepicker,
-              )
-              if (date instanceof Date && date.getTime()) {
-                calendarDate.value = date
-                startDate.value = date
-              }
-            },
+            onChange: (event: Event) =>
+              handleOnChange((event.target as HTMLInputElement).value, 'start'),
+            onInput: (event: Event) =>
+              useDebouncedCallback(
+                () => handleOnChange((event.target as HTMLInputElement).value, 'start'),
+                props.inputOnChangeDelay,
+              ),
             placeholder: Array.isArray(props.placeholder)
               ? props.placeholder[0]
               : props.placeholder,
@@ -692,20 +727,12 @@ const CDateRangePicker = defineComponent({
               ? setInputValue(inputStartHoverValue.value)
               : setInputValue(startDate.value),
           }),
-          props.range &&
-            props.separator !== false &&
-            h(
-              'span',
-              { class: 'input-group-text' },
-              slots.separator
-                ? slots.separator()
-                : h('span', { class: 'picker-input-group-icon date-picker-arrow-icon' }),
-            ),
+          props.range && props.separator !== false && h('div', { class: 'date-picker-separator' }),
           props.range &&
             h('input', {
               autocomplete: 'off',
               class: [
-                'form-control date-picker-input',
+                'date-picker-input',
                 {
                   hover: inputEndHoverValue.value,
                 },
@@ -715,17 +742,13 @@ const CDateRangePicker = defineComponent({
               onClick: () => {
                 selectEndDate.value = true
               },
-              onInput: (event: Event) => {
-                const date = getLocalDateFromString(
-                  (event.target as HTMLInputElement).value,
-                  props.locale,
-                  props.timepicker,
-                )
-                if (date instanceof Date && date.getTime()) {
-                  calendarDate.value = date
-                  endDate.value = date
-                }
-              },
+              onChange: (event: Event) =>
+                handleOnChange((event.target as HTMLInputElement).value, 'end'),
+              onInput: (event: Event) =>
+                useDebouncedCallback(
+                  () => handleOnChange((event.target as HTMLInputElement).value, 'end'),
+                  props.inputOnChangeDelay,
+                ),
               placeholder: props.placeholder[1],
               readonly: props.inputReadOnly || typeof props.format === 'string',
               required: props.required,
@@ -734,31 +757,13 @@ const CDateRangePicker = defineComponent({
                 ? setInputValue(inputEndHoverValue.value)
                 : setInputValue(endDate.value),
             }),
-          (props.indicator || props.cleaner) &&
-            h('span', { class: 'input-group-text' }, [
-              props.indicator &&
-                h(
-                  'span',
-                  {
-                    class: 'picker-input-group-indicator',
-                  },
-                  slots.indicator
-                    ? slots.indicator()
-                    : h('span', { class: 'picker-input-group-icon date-picker-input-icon' }),
-                ),
-              props.cleaner &&
-                h(
-                  'span',
-                  {
-                    class: 'picker-input-group-cleaner',
-                    onClick: (event: Event) => handleClear(event),
-                    role: 'button',
-                  },
-                  slots.cleaner
-                    ? slots.cleaner()
-                    : h('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' }),
-                ),
-            ]),
+          props.indicator && h('div', { class: 'date-picker-indicator' }),
+          props.cleaner &&
+            (startDate.value || endDate.value) &&
+            h('div', {
+              class: 'date-picker-cleaner',
+              onClick: (event: Event) => handleClear(event),
+            }),
         ],
       )
 
@@ -785,6 +790,7 @@ const CDateRangePicker = defineComponent({
                 class: [
                   'date-picker',
                   {
+                    [`date-picker-${props.size}`]: props.size,
                     disabled: props.disabled,
                     'is-invalid': isValid.value === false ? true : false,
                     'is-valid': isValid.value,
@@ -815,7 +821,7 @@ const CDateRangePicker = defineComponent({
               {
                 toggler: () => InputGroup(),
                 footer: () =>
-                  h('div', { class: 'picker-footer' }, [
+                  h('div', { class: 'date-picker-footer' }, [
                     props.todayButton &&
                       h(
                         CButton,
@@ -896,31 +902,36 @@ const CDateRangePicker = defineComponent({
                         h(
                           CCalendar,
                           {
-                            calendarDate: new Date(
-                              calendarDate.value.getFullYear(),
-                              calendarDate.value.getMonth(),
-                              1,
-                            ),
-                            calendars: props.calendars,
+                            calendarDate: calendarDate.value,
+                            calendars: isMobile.value ? 1 : props.calendars,
+                            class: 'date-picker-calendars',
                             dayFormat: props.dayFormat,
                             disabledDates: props.disabledDates,
-                            ...(endDate.value && { endDate: endDate.value }),
+                            endDate: endDate.value,
                             firstDayOfWeek: props.firstDayOfWeek,
                             locale: props.locale,
                             maxDate: maxDate.value,
                             minDate: minDate.value,
-                            navYearFirst: props.navYearFirst,
                             navigation: props.navigation,
+                            navYearFirst: props.navYearFirst,
                             range: props.range,
-                            selectEndDate: selectEndDate.value,
                             selectAdjacementDays: props.selectAdjacementDays,
+                            selectEndDate: selectEndDate.value,
+                            selectionType: props.selectionType,
                             showAdjacementDays: props.showAdjacementDays,
-                            ...(startDate.value && { startDate: startDate.value }),
-                            onCalendarCellHover: (date: Date | null) =>
-                              handleCalendarCellHover(date),
-                            onCalendarDateChange: (date: Date) => handleCalendarDateChange(date),
+                            showWeekNumber: props.showWeekNumber,
+                            startDate: startDate.value,
+                            weekdayFormat: props.weekdayFormat,
+                            weekNumbersLabel: props.weekNumbersLabel,
+                            onDateHover: (date: Date | null) => handleDateHover(date),
+                            onCalendarDateChange: (date: Date) => {
+                              calendarDate.value = date
+                            },
                             onStartDateChange: (date: Date) => handleStartDateChange(date),
                             onEndDateChange: (date: Date) => handleEndDateChange(date),
+                            onSelectEndChange: (value: boolean) => {
+                              selectEndDate.value = value
+                            },
                           },
                           {
                             /**
@@ -964,7 +975,7 @@ const CDateRangePicker = defineComponent({
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     handleStartDateChange(date),
-                                  time: startDate.value,
+                                  time: startDate.value && new Date(startDate.value),
                                   variant: 'select',
                                 }),
                                 h(CTimePicker, {
@@ -973,7 +984,7 @@ const CDateRangePicker = defineComponent({
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     handleEndDateChange(date),
-                                  time: endDate.value,
+                                  time: endDate.value && new Date(endDate.value),
                                   variant: 'select',
                                 }),
                               ]
@@ -993,7 +1004,10 @@ const CDateRangePicker = defineComponent({
                                     index === 0
                                       ? handleStartDateChange(date)
                                       : handleEndDateChange(date),
-                                  time: index === 0 ? startDate.value : endDate.value,
+                                  time:
+                                    index === 0
+                                      ? startDate.value && new Date(startDate.value)
+                                      : endDate.value && new Date(endDate.value),
                                   variant: 'select',
                                 }),
                               ),

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

@@ -32,9 +32,9 @@ 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']),

package/src/components/dropdown/CDropdown.ts

@@ -2,51 +2,11 @@ import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
-import type { Placements, Triggers } from '../../types'
+import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
 
-export type Directions = 'start' | 'end'
-
-export type Breakpoints =
-  | { xs: Directions }
-  | { sm: Directions }
-  | { md: Directions }
-  | { lg: Directions }
-  | { xl: Directions }
-  | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
-
-const getPlacement = (
-  placement: Placement,
-  direction: string | undefined,
-  alignment: Alignments | string | undefined,
-  isRTL: boolean,
-): Placements => {
-  let _placement = placement
-
-  if (direction === 'dropup') {
-    _placement = isRTL ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL ? 'bottom-start' : 'bottom-end'
-  }
-
-  return _placement
-}
+import type { Alignments } from './types'
+import { getNextActiveElement, getPlacement } from './utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
@@ -214,6 +174,8 @@ const CDropdown = defineComponent({
         popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
+        dropdownToggleRef.value.addEventListener('keydown', handleKeydown)
+        dropdownMenuRef.value.addEventListener('keydown', handleKeydown)
         emit('show')
         return
       }
@@ -221,6 +183,9 @@ const CDropdown = defineComponent({
       popper.value && destroyPopper()
       window.removeEventListener('mouseup', handleMouseUp)
       window.removeEventListener('keyup', handleKeyup)
+      dropdownToggleRef.value &&
+        dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
       emit('hide')
     })
 
@@ -235,6 +200,21 @@ const CDropdown = defineComponent({
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        visible.value &&
+        dropdownMenuRef.value &&
+        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
+      ) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const items: HTMLElement[] = Array.from(
+          dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+        )
+        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+      }
+    }
+
     const handleKeyup = (event: KeyboardEvent) => {
       if (props.autoClose === false) {
         return

package/src/components/dropdown/CDropdownMenu.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, inject, Ref } from 'vue'
 
+import { getAlignmentClassNames } from './utils'
+
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
   props: {
@@ -20,32 +22,15 @@ const CDropdownMenu = defineComponent({
 
     const { alignment, dark, popper } = config
 
-    // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
-    const alignmentClassNames = (alignment: object | string) => {
-      const classNames: string[] = []
-      if (typeof alignment === 'object') {
-        Object.keys(alignment).map((key) => {
-          classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-        })
-      }
-      if (typeof alignment === 'string') {
-        classNames.push(`dropdown-menu-${alignment}`)
-      }
-      return classNames
-    }
-
     return () =>
       h(
         props.component,
         {
-          class: [
-            'dropdown-menu',
-            { 'dropdown-menu-dark': dark, show: visible.value },
-            alignmentClassNames(alignment),
-          ],
+          class: ['dropdown-menu', { show: visible.value }, getAlignmentClassNames(alignment)],
           ...((typeof alignment === 'object' || !popper) && {
             'data-coreui-popper': 'static',
           }),
+          ...(dark && { 'data-coreui-theme': 'dark' }),
           ref: dropdownMenuRef,
         },
         props.component === 'ul'