@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-beta.0

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({
@@ -212,6 +211,27 @@ const CDateRangePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * 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,
+    },
     /**
      * Toggle the readonly state for the component.
      */
@@ -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-beta.0
+     */
+    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-beta.0
+     */
+    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-beta.0
+     */
+    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,47 +524,37 @@ const CDateRangePicker = defineComponent({
     watch(
       () => [props.valid, props.invalid],
       () => {
-        isValid.value = props.valid || (props.invalid && false)
+        isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
       },
     )
 
     watch(
       () => props.startDate,
       () => {
-        if (props.startDate) {
-          const date = new Date(props.startDate)
-          calendarDate.value = date
-          startDate.value = date
-        }
+        calendarDate.value = props.startDate ? props.startDate : null
+        startDate.value = props.startDate ? props.startDate : null
       },
     )
 
     watch(
       () => props.endDate,
       () => {
-        if (props.endDate) {
-          const date = new Date(props.endDate)
-          calendarDate.value = date
-          endDate.value = date
-        }
+        calendarDate.value = props.endDate ? props.endDate : null
+        endDate.value = props.endDate ? props.endDate : null
       },
     )
 
     watch(
       () => props.maxDate,
       () => {
-        if (props.maxDate) {
-          maxDate.value = new Date(props.maxDate)
-        }
+        maxDate.value = props.maxDate ? props.maxDate : null
       },
     )
 
     watch(
       () => props.minDate,
       () => {
-        if (props.minDate) {
-          minDate.value = new Date(props.minDate)
-        }
+        minDate.value = props.minDate ? props.minDate : null
       },
     )
 
@@ -547,15 +574,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 +596,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 +668,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 +702,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 +734,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 +894,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 +967,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 +976,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 +996,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',
@@ -99,6 +59,17 @@ const CDropdown = defineComponent({
         return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
       },
     },
+    /**
+     * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0-beta.0
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -143,6 +114,15 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Generates dropdown menu using Teleport.
+     *
+     * @since v5.0.0-beta.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      */
@@ -214,6 +194,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,13 +203,18 @@ 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')
     })
 
     provide('config', {
       alignment: props.alignment,
+      container: props.container,
       dark: props.dark,
       popper: props.popper,
+      teleport: props.teleport,
     })
 
     provide('variant', props.variant)
@@ -235,6 +222,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,8 @@
 import { defineComponent, h, inject, Ref } from 'vue'
 
+import { CConditionalTeleport } from '../conditional-teleport'
+import { getAlignmentClassNames } from './utils'
+
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
   props: {
@@ -18,39 +21,36 @@ const CDropdownMenu = defineComponent({
     const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
     const visible = inject('visible') as Ref<boolean>
 
-    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
-    }
+    const { alignment, container, dark, popper, teleport } = config
 
     return () =>
       h(
-        props.component,
+        CConditionalTeleport,
+        {
+          container: container,
+          teleport: teleport,
+        },
         {
-          class: [
-            'dropdown-menu',
-            { 'dropdown-menu-dark': dark, show: visible.value },
-            alignmentClassNames(alignment),
-          ],
-          ...((typeof alignment === 'object' || !popper) && {
-            'data-coreui-popper': 'static',
-          }),
-          ref: dropdownMenuRef,
+          default: () =>
+            h(
+              props.component,
+              {
+                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'
+                ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
+                : slots.default && slots.default(),
+            ),
         },
-        props.component === 'ul'
-          ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
-          : slots.default && slots.default(),
       )
   },
 })