@coreui/vue-pro 5.13.0 → 5.15.0

package/src/components/date-picker/CDatePicker.ts

@@ -281,6 +281,15 @@ const CDatePicker = defineComponent({
       type: String,
       default: 'Select date',
     },
+    /**
+     * Enable live preview of dates in input fields when hovering over calendar cells.
+     *
+     * @since 5.14.0
+     */
+    previewDateOnHover: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
      *

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

@@ -1,13 +1,18 @@
-import { defineComponent, h, onMounted, PropType, ref, watch } from 'vue'
+import { defineComponent, h, onMounted, PropType, Ref, ref, watch } from 'vue'
 
 import { CButton } from '../button'
 import { CCalendar } from '../calendar'
-import { convertToDateObject } from '../calendar/utils'
+import {
+  convertToDateObject,
+  getDateBySelectionType,
+  getLocalDateFromString,
+  isDateDisabled,
+} from '../calendar/utils'
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
-import { getInputIdOrName, getLocalDateFromString } from './utils'
+import { getInputIdOrName } from './utils'
 
 import { useDebouncedCallback } from '../../composables'
 import { Color } from '../props'
@@ -341,6 +346,15 @@ const CDateRangePicker = defineComponent({
       type: [String, Array] as PropType<string | [string, string]>,
       default: () => ['Start date', 'End date'],
     },
+    /**
+     * Enable live preview of dates in input fields when hovering over calendar cells.
+     *
+     * @since 5.14.0
+     */
+    previewDateOnHover: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * @ignore
      */
@@ -640,9 +654,17 @@ const CDateRangePicker = defineComponent({
 
     const formatDate = (date: Date | string) => {
       if (props.inputDateFormat) {
-        return props.inputDateFormat(
+        const convertedDate =
           date instanceof Date ? new Date(date) : convertToDateObject(date, props.selectionType)
-        )
+
+        if (
+          !convertedDate ||
+          (convertedDate instanceof Date && Number.isNaN(convertedDate.getTime()))
+        ) {
+          return ''
+        }
+
+        return props.inputDateFormat(convertedDate)
       }
 
       if (props.selectionType !== 'day') {
@@ -650,13 +672,20 @@ const CDateRangePicker = defineComponent({
       }
 
       const _date = new Date(date)
+      if (Number.isNaN(_date.getTime())) {
+        return ''
+      }
 
       return props.timepicker
         ? _date.toLocaleString(props.locale)
         : _date.toLocaleDateString(props.locale)
     }
 
-    const setInputValue = (date: Date | string | null) => {
+    const setInputValue = (date: Date | string | null, value?: Ref<HTMLInputElement>) => {
+      if (date instanceof Date && isNaN(date.getTime())) {
+        return value?.value
+      }
+
       if (date) {
         return formatDate(date)
       }
@@ -665,6 +694,10 @@ const CDateRangePicker = defineComponent({
     }
 
     const handleDateHover = (date: Date | string | null) => {
+      if (!props.previewDateOnHover) {
+        return
+      }
+
       if (selectEndDate.value) {
         inputEndHoverValue.value = date
         return
@@ -737,24 +770,118 @@ const CDateRangePicker = defineComponent({
     }
 
     const handleOnChange = (value: string, input: string) => {
-      const date = props.inputDateParse
-        ? props.inputDateParse(value)
-        : getLocalDateFromString(value, props.locale, props.timepicker)
+      let date: Date | string | null = null
+
+      if (props.inputDateParse) {
+        date = props.inputDateParse(value)
+      } else if (props.selectionType === 'day') {
+        date = getLocalDateFromString(value, props.locale, props.timepicker)
+      } else {
+        date = convertToDateObject(value, props.selectionType)
+      }
+
       if (date instanceof Date && date.getTime()) {
+        if (
+          isDateDisabled(
+            date,
+            props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null,
+            props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null,
+            props.disabledDates
+          )
+        ) {
+          return // Don't update if date is disabled
+        }
+
         calendarDate.value = date
       }
 
+      let formatedDate: Date | string | null = date ?? null
+
+      if (date instanceof Date && date.getTime() && props.selectionType !== 'day') {
+        formatedDate = getDateBySelectionType(date, props.selectionType)
+      }
+
       if (input === 'start') {
-        startDate.value = date ?? null
-        emit('start-date-change', date ?? null)
-        emit('update:start-date', date ?? null)
+        startDate.value = formatedDate ?? null
+        emit('start-date-change', formatedDate ?? null)
+        emit('update:start-date', formatedDate ?? null)
       } else {
-        endDate.value = date ?? null
-        emit('end-date-change', date ?? null)
-        emit('update:end-date', date ?? null)
+        endDate.value = formatedDate ?? null
+        emit('end-date-change', formatedDate ?? null)
+        emit('update:end-date', formatedDate ?? null)
       }
     }
 
+    const createInputElement = (position: 'start' | 'end') => {
+      const isStart = position === 'start'
+      const hoverValue = isStart ? inputStartHoverValue.value : inputEndHoverValue.value
+      const dateValue = isStart ? startDate.value : endDate.value
+      const inputRef = isStart ? inputStartRef : inputEndRef
+
+      return h('input', {
+        autocomplete: 'off',
+        class: [
+          'date-picker-input',
+          {
+            hover: hoverValue,
+          },
+        ],
+        disabled: props.disabled,
+        ...(props.id && { id: getInputIdOrName(props.id, props.range, position) }),
+        ...(props.name && { name: getInputIdOrName(props.name, props.range, position) }),
+        ...(props.id &&
+          !Array.isArray(props.id) &&
+          !props.name && {
+            name: isStart
+              ? props.range
+                ? `${props.id}-start-date`
+                : `${props.id}-date`
+              : `${props.id}-end-date`,
+          }), // TODO: remove in v6
+        onClick: () => {
+          selectEndDate.value = !isStart
+        },
+        onChange: (event: Event) =>
+          handleOnChange((event.target as HTMLInputElement).value, position),
+        onInput: useDebouncedCallback(
+          (event: Event) => handleOnChange((event.target as HTMLInputElement).value, position),
+          props.inputOnChangeDelay
+        ),
+        placeholder: Array.isArray(props.placeholder)
+          ? props.placeholder[isStart ? 0 : 1]
+          : props.placeholder,
+        readonly: props.inputReadOnly || typeof props.format === 'string',
+        required: props.required,
+        ref: inputRef,
+        value: setInputValue(dateValue, inputRef.value),
+      })
+    }
+
+    const createPreviewInput = (position: 'start' | 'end') => {
+      const isStart = position === 'start'
+      const hoverValue = isStart ? inputStartHoverValue.value : inputEndHoverValue.value
+
+      return (
+        hoverValue &&
+        h('input', {
+          class: 'date-picker-input date-picker-input-preview',
+          disabled: props.disabled,
+          readonly: true,
+          tabIndex: -1,
+          value: hoverValue ? setInputValue(hoverValue) : '',
+        })
+      )
+    }
+
+    const createInputWithWrapper = (position: 'start' | 'end') => {
+      return props.previewDateOnHover
+        ? h('div', { class: 'date-picker-input-wrapper' }, [
+            createInputElement(position),
+            createPreviewInput(position),
+          ])
+        : createInputElement(position)
+    }
+
     const InputGroup = () =>
       h(
         'div',
@@ -762,74 +889,9 @@ const CDateRangePicker = defineComponent({
           class: 'date-picker-input-group',
         },
         [
-          h('input', {
-            autocomplete: 'off',
-            class: [
-              'date-picker-input',
-              {
-                hover: inputStartHoverValue.value,
-              },
-            ],
-            disabled: props.disabled,
-            ...(props.id && { id: getInputIdOrName(props.id, props.range, 'start') }),
-            ...(props.name && { name: getInputIdOrName(props.name, props.range, 'start') }),
-            ...(props.id &&
-              !Array.isArray(props.id) &&
-              !props.name && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }), // TODO: remove in v6
-            onClick: () => {
-              selectEndDate.value = false
-            },
-            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,
-            readonly: props.inputReadOnly || typeof props.format === 'string',
-            required: props.required,
-            ref: inputStartRef,
-            value: inputStartHoverValue.value
-              ? setInputValue(inputStartHoverValue.value)
-              : setInputValue(startDate.value),
-          }),
+          createInputWithWrapper('start'),
           props.range && props.separator !== false && h('div', { class: 'date-picker-separator' }),
-          props.range &&
-            h('input', {
-              autocomplete: 'off',
-              class: [
-                'date-picker-input',
-                {
-                  hover: inputEndHoverValue.value,
-                },
-              ],
-              disabled: props.disabled,
-              ...(props.id && { id: getInputIdOrName(props.id, props.range, 'end') }),
-              ...(props.name && { name: getInputIdOrName(props.name, props.range, 'end') }),
-              ...(props.id &&
-                !Array.isArray(props.id) &&
-                !props.name && { name: `${props.id}-end-date` }), // TODO: remove in v6
-              onClick: () => {
-                selectEndDate.value = true
-              },
-              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,
-              ref: inputEndRef,
-              value: inputEndHoverValue.value
-                ? setInputValue(inputEndHoverValue.value)
-                : setInputValue(endDate.value),
-            }),
+          props.range && createInputWithWrapper('end'),
           props.indicator &&
             h('div', {
               class: 'date-picker-indicator',

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

@@ -21,61 +21,3 @@ export const getInputIdOrName = (
 
   return attribute
 }
-
-/**
- * Parses a date string into a Date object based on the provided locale and time inclusion.
- *
- * @param dateString - The date string to parse.
- * @param locale - The locale to use for parsing the date string.
- * @param includeTime - Optional. Determines whether to include time in the parsed Date object.
- * @returns A Date object representing the parsed date and time, or `undefined` if parsing fails.
- */
-export const getLocalDateFromString = (
-  string: string,
-  locale: string,
-  time?: boolean
-): Date | undefined => {
-  const date = new Date(2013, 11, 31, 17, 19, 22)
-  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
-  regex = regex
-    .replace('2013', '(?<year>[0-9]{2,4})')
-    .replace('12', '(?<month>[0-9]{1,2})')
-    .replace('31', '(?<day>[0-9]{1,2})')
-
-  if (time) {
-    regex = regex
-      .replace('5', '(?<hour>[0-9]{1,2})')
-      .replace('17', '(?<hour>[0-9]{1,2})')
-      .replace('19', '(?<minute>[0-9]{1,2})')
-      .replace('22', '(?<second>[0-9]{1,2})')
-      .replace('PM', '(?<ampm>[A-Z]{2})')
-  }
-
-  const rgx = new RegExp(`${regex}`)
-  const partials = string.match(rgx)
-
-  if (partials === null) return
-
-  const newDate =
-    partials.groups &&
-    (time
-      ? new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-          partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
-              ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
-            : Number(partials.groups['hour']),
-          Number(partials.groups['minute']),
-          Number(partials.groups['second'])
-        )
-      : new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day'])
-        ))
-
-  return newDate
-}

package/src/components/dropdown/CDropdown.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
+import { defineComponent, h, ref, provide, watch, PropType, onUnmounted, nextTick } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
@@ -158,6 +158,7 @@ const CDropdown = defineComponent({
   setup(props, { slots, emit }) {
     const dropdownToggleRef = ref()
     const dropdownMenuRef = ref()
+    const pendingKeyDownEventRef = ref<KeyboardEvent | null>(null)
     const popper = ref(typeof props.alignment === 'object' ? false : props.popper)
     const visible = ref(props.visible)
 
@@ -176,7 +177,7 @@ const CDropdown = defineComponent({
         props.placement,
         props.direction,
         props.alignment,
-        isRTL(dropdownMenuRef.value),
+        isRTL(dropdownMenuRef.value)
       ) as Placement,
     }
 
@@ -184,16 +185,27 @@ const CDropdown = defineComponent({
       () => props.visible,
       () => {
         visible.value = props.visible
-      },
+      }
     )
 
     watch(visible, () => {
       if (visible.value && dropdownToggleRef.value && dropdownMenuRef.value) {
-        popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
+        if (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)
+
+        if (pendingKeyDownEventRef.value) {
+          nextTick(() => {
+            handleKeydown(pendingKeyDownEventRef.value as KeyboardEvent)
+            pendingKeyDownEventRef.value = null
+          })
+        }
+        
         emit('show')
         return
       }
@@ -201,10 +213,14 @@ const CDropdown = defineComponent({
       popper.value && destroyPopper()
       window.removeEventListener('mouseup', handleMouseUp)
       window.removeEventListener('keyup', handleKeyup)
+      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
+      emit('hide')
+    })
+
+    onUnmounted(() => {
       dropdownToggleRef.value &&
         dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
       dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
-      emit('hide')
     })
 
     provide('config', {
@@ -219,18 +235,14 @@ const CDropdown = defineComponent({
     provide('visible', visible)
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
+    provide('pendingKeyDownEventRef', pendingKeyDownEventRef)
 
     const handleKeydown = (event: KeyboardEvent) => {
-      if (
-        visible.value &&
-        dropdownMenuRef.value &&
-        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
-      ) {
+      if (dropdownMenuRef.value && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
         event.preventDefault()
         const target = event.target as HTMLElement
-        // eslint-disable-next-line unicorn/prefer-spread
         const items: HTMLElement[] = Array.from(
-          dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+          dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
         )
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
@@ -243,6 +255,7 @@ const CDropdown = defineComponent({
 
       if (event.key === 'Escape') {
         setVisible(false)
+        dropdownToggleRef.value?.focus()
       }
     }
 
@@ -267,22 +280,20 @@ const CDropdown = defineComponent({
       }
     }
 
-    const setVisible = (_visible?: boolean) => {
+    const setVisible = (_visible?: boolean, event?: KeyboardEvent) => {
       if (props.disabled) {
         return
       }
 
-      if (typeof _visible == 'boolean') {
+      if (typeof _visible === 'boolean') {
+        if (event) {
+          pendingKeyDownEventRef.value = event || null
+        }
+
         visible.value = _visible
-        return
-      }
 
-      if (visible.value === true) {
-        visible.value = false
         return
       }
-
-      visible.value = true
     }
 
     provide('setVisible', setVisible)
@@ -298,11 +309,11 @@ const CDropdown = defineComponent({
                 props.direction === 'center'
                   ? 'dropdown-center'
                   : props.direction === 'dropup-center'
-                  ? 'dropup dropup-center'
-                  : props.direction,
+                    ? 'dropup dropup-center'
+                    : props.direction,
               ],
             },
-            slots.default && slots.default(),
+            slots.default && slots.default()
           )
   },
 })

package/src/components/dropdown/CDropdownToggle.ts

@@ -100,7 +100,7 @@ const CDropdownToggle = defineComponent({
     const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownVariant = inject('variant') as string
     const visible = inject('visible') as Ref<boolean>
-    const setVisible = inject('setVisible') as (_visible?: boolean) => void
+    const setVisible = inject('setVisible') as (_visible?: boolean, event?: KeyboardEvent) => void
 
     const triggers = {
       ...((props.trigger === 'click' || props.trigger.includes('click')) && {
@@ -110,7 +110,7 @@ const CDropdownToggle = defineComponent({
             return
           }
 
-          setVisible()
+          setVisible(!visible.value)
         },
       }),
       ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
@@ -128,6 +128,12 @@ const CDropdownToggle = defineComponent({
           setVisible(false)
         },
       }),
+      onkeydown: (event: KeyboardEvent) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          event.preventDefault()
+          setVisible(true, event)
+        }
+      }
     }
 
     const togglerProps = computed(() => {