@coreui/vue-pro 5.14.0 → 5.16.0

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'
@@ -649,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') {
@@ -659,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)
       }
@@ -750,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',
@@ -775,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,15 @@
-import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onUnmounted,
+  provide,
+  PropType,
+  ref,
+  Ref,
+  watch,
+} from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
@@ -6,7 +17,8 @@ import type { Triggers } from '../../types'
 import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments } from './types'
-import { getPlacement } from './utils'
+import { getPlacement, getReferenceElement } from './utils'
+import { CFocusTrap } from '../focus-trap'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
@@ -53,7 +65,7 @@ const CDropdown = defineComponent({
      * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
      */
     autoClose: {
-      type: [Boolean, String],
+      type: [Boolean, String] as PropType<boolean | 'inside' | 'outside'>,
       default: true,
       validator: (value: boolean | string) => {
         return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
@@ -112,6 +124,21 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Sets the reference element for positioning the Vue Dropdown Menu.
+     * - `toggle` - The Vue Dropdown Toggle button (default).
+     * - `parent` - The Vue Dropdown wrapper element.
+     * - `HTMLElement` - A custom HTML element.
+     * - `Ref` - A custom reference element.
+     *
+     * @since 5.7.0
+     */
+    reference: {
+      type: [String, Object] as PropType<
+        'parent' | 'toggle' | HTMLElement | Ref<HTMLElement | null>
+      >,
+      default: 'toggle',
+    },
     /**
      * Generates dropdown menu using Teleport.
      *
@@ -156,14 +183,16 @@ const CDropdown = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const dropdownToggleRef = ref()
-    const dropdownMenuRef = ref()
+    const dropdownRef = ref<HTMLElement | null>(null)
+    const dropdownMenuRef = ref<HTMLElement | null>(null)
+    const dropdownToggleRef = ref<HTMLElement | null>(null)
+    const pendingKeyDownEventRef = ref<KeyboardEvent | null>(null)
     const popper = ref(typeof props.alignment === 'object' ? false : props.popper)
     const visible = ref(props.visible)
 
     const { initPopper, destroyPopper } = usePopper()
 
-    const popperConfig = {
+    const popperConfig = computed(() => ({
       modifiers: [
         {
           name: 'offset',
@@ -176,37 +205,62 @@ const CDropdown = defineComponent({
         props.placement,
         props.direction,
         props.alignment,
-        isRTL(dropdownMenuRef.value),
+        isRTL(dropdownMenuRef.value)
       ) as Placement,
-    }
+    }))
 
     watch(
       () => props.visible,
       () => {
         visible.value = props.visible
-      },
+      }
     )
 
     watch(visible, () => {
       if (visible.value && dropdownToggleRef.value && dropdownMenuRef.value) {
-        popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
-        window.addEventListener('mouseup', handleMouseUp)
+        const referenceElement = getReferenceElement(
+          props.reference,
+          dropdownToggleRef,
+          dropdownRef
+        )
+        if (referenceElement && popper.value) {
+          initPopper(referenceElement, dropdownMenuRef.value, popperConfig.value)
+        }
+
+        window.addEventListener('click', handleClick)
         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
       }
 
-      popper.value && destroyPopper()
-      window.removeEventListener('mouseup', handleMouseUp)
+      if (popper.value) {
+        destroyPopper()
+      }
+
+      window.removeEventListener('click', handleClick)
       window.removeEventListener('keyup', handleKeyup)
+      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
       dropdownToggleRef.value &&
         dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
-      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
       emit('hide')
     })
 
+    onUnmounted(() => {
+      dropdownToggleRef.value &&
+        dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
+    })
+
     provide('config', {
       alignment: props.alignment,
       container: props.container,
@@ -219,18 +273,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,67 +293,84 @@ const CDropdown = defineComponent({
 
       if (event.key === 'Escape') {
         setVisible(false)
+        dropdownToggleRef.value?.focus()
       }
     }
 
-    const handleMouseUp = (event: Event) => {
+    const handleClick = (event: Event) => {
       if (!dropdownToggleRef.value || !dropdownMenuRef.value) {
         return
       }
 
-      if (dropdownToggleRef.value.contains(event.target as HTMLElement)) {
+      if ((event as MouseEvent).button === 2) {
+        return
+      }
+
+      const composedPath = event.composedPath()
+      const isOnToggle = composedPath.includes(dropdownToggleRef.value)
+      const isOnMenu = composedPath.includes(dropdownMenuRef.value)
+
+      if (isOnToggle) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+      const FORM_TAG_RE = /^(input|select|option|textarea|form|button|label)$/i
+
+      if (isOnMenu && target && FORM_TAG_RE.test(target.tagName)) {
         return
       }
 
       if (
         props.autoClose === true ||
-        (props.autoClose === 'inside' &&
-          dropdownMenuRef.value.contains(event.target as HTMLElement)) ||
-        (props.autoClose === 'outside' &&
-          !dropdownMenuRef.value.contains(event.target as HTMLElement))
+        (props.autoClose === 'inside' && isOnMenu) ||
+        (props.autoClose === 'outside' && !isOnMenu)
       ) {
         setVisible(false)
-        return
       }
     }
 
-    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)
 
     return () =>
-      props.variant === 'input-group'
-        ? [slots.default && slots.default()]
-        : h(
-            'div',
-            {
-              class: [
-                props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
-                props.direction === 'center'
-                  ? 'dropdown-center'
-                  : props.direction === 'dropup-center'
-                  ? 'dropup dropup-center'
-                  : props.direction,
-              ],
-            },
-            slots.default && slots.default(),
-          )
+      h(
+        CFocusTrap,
+        { active: props.teleport && visible.value, additionalContainer: dropdownMenuRef },
+        () =>
+          props.variant === 'input-group'
+            ? [slots.default && slots.default()]
+            : h(
+                'div',
+                {
+                  class: [
+                    props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
+                    props.direction === 'center'
+                      ? 'dropdown-center'
+                      : props.direction === 'dropup-center'
+                        ? 'dropup dropup-center'
+                        : props.direction,
+                  ],
+                  ref: dropdownRef,
+                },
+                slots.default && slots.default()
+              )
+      )
   },
 })
 

package/src/components/dropdown/CDropdownToggle.ts

@@ -74,6 +74,15 @@ const CDropdownToggle = defineComponent({
      * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
      */
     split: Boolean,
+    /**
+     * Screen reader label for split button dropdown toggle.
+     *
+     * @since 5.7.0
+     */
+    splitLabel: {
+      type: String,
+      default: 'Toggle Dropdown',
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      *
@@ -100,7 +109,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 +119,7 @@ const CDropdownToggle = defineComponent({
             return
           }
 
-          setVisible()
+          setVisible(!visible.value)
         },
       }),
       ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
@@ -128,6 +137,12 @@ const CDropdownToggle = defineComponent({
           setVisible(false)
         },
       }),
+      onkeydown: (event: KeyboardEvent) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          event.preventDefault()
+          setVisible(true, event)
+        }
+      }
     }
 
     const togglerProps = computed(() => {
@@ -188,7 +203,7 @@ const CDropdownToggle = defineComponent({
               },
               () =>
                 props.split
-                  ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                  ? h('span', { class: 'visually-hidden' }, props.splitLabel)
                   : slots.default && slots.default(),
             )
   },