@coreui/vue-pro 5.15.0 → 5.16.0

package/src/components/dropdown/CDropdown.ts

@@ -1,4 +1,15 @@
-import { defineComponent, h, ref, provide, watch, PropType, onUnmounted, nextTick } 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,15 +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',
@@ -179,7 +207,7 @@ const CDropdown = defineComponent({
         props.alignment,
         isRTL(dropdownMenuRef.value)
       ) as Placement,
-    }
+    }))
 
     watch(
       () => props.visible,
@@ -190,11 +218,16 @@ const CDropdown = defineComponent({
 
     watch(visible, () => {
       if (visible.value && dropdownToggleRef.value && dropdownMenuRef.value) {
-        if (popper.value) {
-          initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
+        const referenceElement = getReferenceElement(
+          props.reference,
+          dropdownToggleRef,
+          dropdownRef
+        )
+        if (referenceElement && popper.value) {
+          initPopper(referenceElement, dropdownMenuRef.value, popperConfig.value)
         }
 
-        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('click', handleClick)
         window.addEventListener('keyup', handleKeyup)
         dropdownToggleRef.value.addEventListener('keydown', handleKeydown)
         dropdownMenuRef.value.addEventListener('keydown', handleKeydown)
@@ -205,15 +238,20 @@ const CDropdown = defineComponent({
             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)
       emit('hide')
     })
 
@@ -259,24 +297,36 @@ const CDropdown = defineComponent({
       }
     }
 
-    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
       }
     }
 
@@ -299,22 +349,28 @@ const CDropdown = defineComponent({
     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.
      *
@@ -194,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(),
             )
   },

package/src/components/dropdown/utils.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'vue'
 import type { Placement } from '@popperjs/core'
 import type { Placements } from '../../types'
 import type { Alignments, Breakpoints } from './types'
@@ -49,3 +50,23 @@ export const getPlacement = (
 
   return _placement
 }
+
+export const getReferenceElement = (
+  reference: 'parent' | 'toggle' | Ref<HTMLElement | null> | HTMLElement,
+  dropdownToggleRef: Ref<HTMLElement | null>,
+  dropdownRef: Ref<HTMLElement | null>
+): HTMLElement | null => {
+  if (reference === 'parent') {
+    return dropdownRef.value
+  }
+
+  if (reference instanceof HTMLElement) {
+    return reference
+  }
+
+  if (reference instanceof Object && 'value' in reference) {
+    return reference.value
+  }
+
+  return dropdownToggleRef.value
+}

package/src/components/nav/CNavItem.ts

@@ -5,7 +5,7 @@ import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CNavItemProps extends ComponentProps<typeof CNavLink> {
   as: string
-  class: string
+  class?: string
 }
 
 const CNavItem = defineComponent({

package/src/components/time-picker/CTimePicker.ts

@@ -25,6 +25,28 @@ import { Color } from '../props'
 const CTimePicker = defineComponent({
   name: 'CTimePicker',
   props: {
+    /**
+     * Accessible label for the hours selection element.
+     */
+    ariaSelectHoursLabel: String,
+    /**
+     * Accessible label for the AM/PM selection element.
+     *
+     * @since 5.16.0
+     */
+    ariaSelectMeridiemLabel: String,
+    /**
+     * Accessible label for the minutes selection element.
+     *
+     * @since 5.16.0
+     */
+    ariaSelectMinutesLabel: String,
+    /**
+     * Accessible label for the seconds selection element.
+     *
+     * @since 5.16.0
+     */
+    ariaSelectSecondsLabel: String,
     /**
      * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
      *
@@ -339,9 +361,11 @@ const CTimePicker = defineComponent({
   setup(props, { emit, attrs, slots }) {
     const formRef = ref()
     const inputRef = ref()
-
+    const columnRefs = ref<(HTMLElement | null)[]>([])
     const date = ref<Date | null>(convertTimeToDate(props.time))
-    const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
+    const ampm = ref<'am' | 'pm' | null>(
+      date.value ? getAmPm(new Date(date.value), props.locale) : null
+    )
     const initialDate = ref<Date | null>(null)
     const visible = ref(props.visible)
     const localizedTimePartials = ref<LocalizedTimePartials>({
@@ -354,6 +378,10 @@ const CTimePicker = defineComponent({
       props.valid ?? (props.invalid === true ? false : undefined)
     )
 
+    const setColumnRef = (index: number, el: HTMLElement | null) => {
+      columnRefs.value[index] = el
+    }
+
     watch(
       () => props.time,
       () => {
@@ -421,22 +449,32 @@ const CTimePicker = defineComponent({
       isValid.value = false
     }
 
-    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'meridiem', value: string) => {
       const _date = date.value || new Date('1970-01-01')
 
-      if (set === 'toggle') {
+      if (set === 'meridiem') {
+        const currentHours = _date.getHours()
+
         if (value === 'am') {
-          _date.setHours(_date.getHours() - 12)
+          ampm.value = 'am'
+          // Convert PM hours (12-23) to AM hours (0-11)
+          if (currentHours >= 12) {
+            _date.setHours(currentHours - 12)
+          }
         }
 
         if (value === 'pm') {
-          _date.setHours(_date.getHours() + 12)
+          ampm.value = 'pm'
+          // Convert AM hours (0-11) to PM hours (12-23)
+          if (currentHours < 12) {
+            _date.setHours(currentHours + 12)
+          }
         }
       }
 
       if (set === 'hours') {
         if (localizedTimePartials.value && localizedTimePartials.value.hour12) {
-          _date.setHours(convert12hTo24h(ampm.value, Number.parseInt(value)))
+          _date.setHours(convert12hTo24h(ampm.value ?? 'am', Number.parseInt(value)))
         } else {
           _date.setHours(Number.parseInt(value))
         }
@@ -527,6 +565,7 @@ const CTimePicker = defineComponent({
           onChange: (event: Event) =>
             handleTimeChange('hours', (event.target as HTMLSelectElement).value),
           ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
+          'aria-label': props.ariaSelectHoursLabel,
         },
         localizedTimePartials.value &&
           localizedTimePartials.value.listOfHours.map((option) =>
@@ -549,6 +588,7 @@ const CTimePicker = defineComponent({
             onChange: (event: Event) =>
               handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
             ...(date.value && { value: getSelectedMinutes(date.value) }),
+            'aria-label': props.ariaSelectMinutesLabel,
           },
           localizedTimePartials.value &&
             localizedTimePartials.value.listOfMinutes?.map((option) =>
@@ -571,6 +611,7 @@ const CTimePicker = defineComponent({
             onChange: (event: Event) =>
               handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
             ...(date.value && { value: getSelectedSeconds(date.value) }),
+            'aria-label': props.ariaSelectSecondsLabel,
           },
           localizedTimePartials.value &&
             localizedTimePartials.value.listOfSeconds?.map((option) =>
@@ -591,8 +632,9 @@ const CTimePicker = defineComponent({
             class: 'time-picker-inline-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
-              handleTimeChange('toggle', (event.target as HTMLSelectElement).value),
+              handleTimeChange('meridiem', (event.target as HTMLSelectElement).value),
             value: ampm.value,
+            'aria-label': props.ariaSelectMeridiemLabel,
           },
           [
             h(
@@ -615,31 +657,47 @@ const CTimePicker = defineComponent({
 
     const TimePickerRoll = () => [
       h(CTimePickerRollCol, {
+        ariaLabel: props.ariaSelectHoursLabel,
+        columnIndex: 0,
+        columnRefs: columnRefs.value,
         elements: localizedTimePartials.value && localizedTimePartials.value.listOfHours,
         onClick: (index: number) => handleTimeChange('hours', index.toString()),
         selected: getSelectedHour(date.value, props.locale, props.ampm),
+        setColumnRef,
       }),
       props.minutes &&
         h(CTimePickerRollCol, {
+          ariaLabel: props.ariaSelectMinutesLabel,
+          columnIndex: 1,
+          columnRefs: columnRefs.value,
           elements: localizedTimePartials.value && localizedTimePartials.value.listOfMinutes,
           onClick: (index: number) => handleTimeChange('minutes', index.toString()),
           selected: getSelectedMinutes(date.value),
+          setColumnRef,
         }),
       props.seconds &&
         h(CTimePickerRollCol, {
+          ariaLabel: props.ariaSelectSecondsLabel,
+          columnIndex: props.minutes ? 2 : 1,
+          columnRefs: columnRefs.value,
           elements: localizedTimePartials.value && localizedTimePartials.value.listOfSeconds,
           onClick: (index: number) => handleTimeChange('seconds', index.toString()),
           selected: getSelectedSeconds(date.value),
+          setColumnRef,
         }),
       localizedTimePartials.value &&
         localizedTimePartials.value.hour12 &&
         h(CTimePickerRollCol, {
+          ariaLabel: props.ariaSelectMeridiemLabel,
+          columnIndex: (props.minutes ? 1 : 0) + (props.seconds ? 1 : 0) + 1,
+          columnRefs: columnRefs.value,
           elements: [
             { value: 'am', label: 'AM' },
             { value: 'pm', label: 'PM' },
           ],
-          onClick: (value: string) => handleTimeChange('toggle', value),
+          onClick: (value: string) => handleTimeChange('meridiem', value),
           selected: ampm.value,
+          setColumnRef,
         }),
     ]
 
@@ -711,6 +769,7 @@ const CTimePicker = defineComponent({
                           ['time-picker-roll']: props.variant === 'roll',
                         },
                       ],
+                      ...(props.variant !== 'select' && { role: 'group' }),
                     },
                     props.variant === 'select' ? TimePickerSelect() : TimePickerRoll()
                   ),

package/src/components/time-picker/CTimePickerRollCol.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h, onUpdated, PropType, ref, watch } from 'vue'
 
 import { useIsVisible } from '../../composables'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 export interface Element {
   value: number | string
@@ -10,13 +11,18 @@ export interface Element {
 const CTimePickerRollCol = defineComponent({
   name: 'CTimePickerRollCol',
   props: {
+    ariaLabel: String,
+    columnIndex: Number,
+    columnRefs: {
+      type: Array as PropType<(HTMLElement | null)[]>,
+      default: () => [],
+    },
     elements: {
       type: Array as PropType<Element[]>,
       required: true,
     },
-    selected: {
-      type: [Number, String],
-    },
+    selected: [Number, String, null],
+    setColumnRef: Function as PropType<(index: number, el: HTMLElement | null) => void>,
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -29,7 +35,7 @@ const CTimePickerRollCol = defineComponent({
       if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.value?.scrollTo({
           top: nodeEl.offsetTop,
-          behavior: init.value ? 'auto' : 'smooth',
+          behavior: init.value ? 'instant' : 'smooth',
         })
       }
     }
@@ -42,35 +48,107 @@ const CTimePickerRollCol = defineComponent({
       }
     })
 
+    watch(colRef, () => {
+      if (props.columnIndex !== undefined && props.setColumnRef) {
+        props.setColumnRef(props.columnIndex, colRef.value || null)
+      }
+    }, { immediate: true })
+
     onUpdated(() => {
       scrollToSelectedElement()
     })
 
+    const moveFocusToNextColumn = () => {
+      if (!props.columnRefs || props.columnIndex === undefined) return
+
+      if (props.columnIndex < props.columnRefs.length - 1) {
+        const column = props.columnRefs[props.columnIndex + 1]
+        const focusableCell = column?.querySelector('.time-picker-roll-cell[tabindex="0"]') as HTMLElement
+        focusableCell?.focus()
+      }
+    }
+
+    const moveFocusToPreviousColumn = () => {
+      if (!props.columnRefs || props.columnIndex === undefined) return
+
+      if (props.columnIndex > 0) {
+        const column = props.columnRefs[props.columnIndex - 1]
+        const focusableCell = column?.querySelector('.time-picker-roll-cell[tabindex="0"]') as HTMLElement
+        focusableCell?.focus()
+      }
+    }
+
     const handleKeyDown = (event: KeyboardEvent, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
         emit('click', value)
+        moveFocusToNextColumn()
+        return
+      }
+
+      if (colRef.value && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const items = [...colRef.value.querySelectorAll('.time-picker-roll-cell')] as HTMLElement[]
+
+        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+        return
+      }
+
+      if (colRef.value && (event.key === 'Home' || event.key === 'End')) {
+        event.preventDefault()
+        const items = [...colRef.value.querySelectorAll('.time-picker-roll-cell')] as HTMLElement[]
+        const index = event.key === 'Home' ? 0 : items.length - 1
+        items[index]?.focus()
+        return
+      }
+
+      if (colRef.value && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        event.preventDefault()
+        const rtl = isRTL(colRef.value)
+        const shouldGoLeft =
+          (event.key === 'ArrowLeft' && !rtl) || (event.key === 'ArrowRight' && rtl)
+        if (shouldGoLeft) {
+          moveFocusToPreviousColumn()
+        } else {
+          moveFocusToNextColumn()
+        }
       }
     }
 
     return () =>
       h(
         'div',
-        { class: 'time-picker-roll-col', ref: colRef },
-        props.elements.map((element) => {
+        {
+          class: 'time-picker-roll-col',
+          onFocusout: (event: FocusEvent) => {
+            const currentTarget = event.currentTarget as HTMLElement
+            const relatedTarget = event.relatedTarget as HTMLElement | null
+            if (currentTarget && (!relatedTarget || !currentTarget.contains(relatedTarget))) {
+              scrollToSelectedElement()
+            }
+          },
+          ref: colRef,
+          role: 'listbox',
+          'aria-label': props.ariaLabel,
+        },
+        props.elements.map((element, index) => {
+          const isSelected = element.value === props.selected
           return h(
             'div',
             {
               class: [
                 'time-picker-roll-cell',
                 {
-                  selected: element.value === props.selected,
+                  selected: isSelected,
                 },
               ],
               onClick: () => emit('click', element.value),
               onKeydown: (event: KeyboardEvent) => handleKeyDown(event, element.value),
-              role: 'button',
-              tabindex: 0,
+              role: 'option',
+              tabindex: isSelected ? 0 : props.selected ? -1 : index === 0 ? 0 : -1,
+              'aria-label': element.label.toString(),
+              'aria-selected': isSelected,
             },
             element.label
           )