@coreui/vue-pro 5.0.0-alpha.0 → 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,27 +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 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 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 isValid = ref(props.valid || (props.invalid && false))
     const isMobile = ref(false)
+    const selectEndDate = ref(false)
 
     onMounted(() => {
       isMobile.value = window.innerWidth < 768
@@ -487,7 +524,7 @@ const CDateRangePicker = defineComponent({
     watch(
       () => [props.valid, props.invalid],
       () => {
-        isValid.value = props.valid || (props.invalid && false)
+        isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
       },
     )
 
@@ -495,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
         }
       },
     )
@@ -506,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
         }
       },
     )
@@ -517,7 +552,7 @@ const CDateRangePicker = defineComponent({
       () => props.maxDate,
       () => {
         if (props.maxDate) {
-          maxDate.value = new Date(props.maxDate)
+          maxDate.value = props.maxDate
         }
       },
     )
@@ -526,7 +561,7 @@ const CDateRangePicker = defineComponent({
       () => props.minDate,
       () => {
         if (props.minDate) {
-          minDate.value = new Date(props.minDate)
+          minDate.value = props.minDate
         }
       },
     )
@@ -547,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)
       }
@@ -563,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) => {
@@ -643,6 +676,20 @@ 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',
@@ -663,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,
@@ -699,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,
@@ -863,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
+                            },
                           },
                           {
                             /**
@@ -931,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, {
@@ -940,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',
                                 }),
                               ]
@@ -960,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'

package/src/components/dropdown/CDropdownToggle.ts

@@ -1,4 +1,14 @@
-import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref } from 'vue'
+import {
+  cloneVNode,
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  PropType,
+  Ref,
+  ref,
+} from 'vue'
 
 import { CButton } from '../button'
 
@@ -8,10 +18,6 @@ import type { Triggers } from '../../types'
 const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
   props: {
-    /**
-     * Toggle the active state for the component.
-     */
-    active: Boolean,
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -40,6 +46,15 @@ const CDropdownToggle = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
+    /**
+     * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+     *
+     * @since v5.0.0-alpha.1
+     */
+    navLink: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
      */
@@ -87,18 +102,10 @@ const CDropdownToggle = defineComponent({
     const visible = inject('visible') as Ref<boolean>
     const setVisible = inject('setVisible') as (_visible?: boolean) => void
 
-    const className = [
-      {
-        'dropdown-toggle': props.caret,
-        'dropdown-toggle-split': props.split,
-        active: props.active,
-        disabled: props.disabled,
-      },
-    ]
-
     const triggers = {
       ...((props.trigger === 'click' || props.trigger.includes('click')) && {
-        onClick: () => {
+        onClick: (event: Event) => {
+          event.preventDefault()
           if (props.disabled) {
             return
           }
@@ -123,6 +130,20 @@ const CDropdownToggle = defineComponent({
       }),
     }
 
+    const togglerProps = computed(() => {
+      return {
+        class: {
+          'nav-link': dropdownVariant === 'nav-item' && props.navLink,
+          'dropdown-toggle': props.caret,
+          'dropdown-toggle-split': props.split,
+          disabled: props.disabled,
+          show: visible.value,
+        },
+        'aria-expanded': visible.value,
+        ...(!props.disabled && { ...triggers }),
+      }
+    })
+
     onMounted(() => {
       if (togglerRef.value) {
         dropdownToggleRef.value = togglerRef.value.$el
@@ -140,45 +161,30 @@ const CDropdownToggle = defineComponent({
               ...triggers,
             }),
           )
-        : dropdownVariant === 'nav-item'
+        : dropdownVariant === 'nav-item' && props.navLink
         ? h(
             'a',
             {
-              active: props.active,
-              class: [
-                'nav-link',
-                className,
-                {
-                  show: visible.value,
-                },
-              ],
-              disabled: props.disabled,
               href: '#',
+              ...togglerProps.value,
+              role: 'button',
               ref: dropdownToggleRef,
-              ...triggers,
             },
             { default: () => slots.default && slots.default() },
           )
         : h(
             CButton,
             {
-              class: [
-                className,
-                {
-                  show: visible.value,
-                },
-              ],
-              active: props.active,
+              ...togglerProps.value,
               color: props.color,
+              component: props.component,
               disabled: props.disabled,
-              ref: (el) => {
-                togglerRef.value = el
-              },
               shape: props.shape,
               size: props.size,
-              ...triggers,
-              ...(props.component === 'button' && { type: 'button' }),
               variant: props.variant,
+              ref: (el) => {
+                togglerRef.value = el
+              },
             },
             () =>
               props.split

package/src/components/dropdown/types.ts

@@ -0,0 +1,11 @@
+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