@coreui/vue-pro 5.12.0 → 5.13.0

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

@@ -576,7 +576,7 @@ const CDateRangePicker = defineComponent({
     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),
+      props.valid ?? (props.invalid === true ? false : undefined)
     )
     const isMobile = ref(false)
     const selectEndDate = ref(false)
@@ -589,7 +589,7 @@ const CDateRangePicker = defineComponent({
       () => [props.valid, props.invalid],
       () => {
         isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
-      },
+      }
     )
 
     watch(
@@ -597,7 +597,7 @@ const CDateRangePicker = defineComponent({
       () => {
         calendarDate.value = props.startDate ? props.startDate : null
         startDate.value = props.startDate ? props.startDate : null
-      },
+      }
     )
 
     watch(
@@ -605,21 +605,21 @@ const CDateRangePicker = defineComponent({
       () => {
         calendarDate.value = props.endDate ? props.endDate : null
         endDate.value = props.endDate ? props.endDate : null
-      },
+      }
     )
 
     watch(
       () => props.maxDate,
       () => {
         maxDate.value = props.maxDate ? props.maxDate : null
-      },
+      }
     )
 
     watch(
       () => props.minDate,
       () => {
         minDate.value = props.minDate ? props.minDate : null
-      },
+      }
     )
 
     watch(inputStartRef, () => {
@@ -641,7 +641,7 @@ const CDateRangePicker = defineComponent({
     const formatDate = (date: Date | string) => {
       if (props.inputDateFormat) {
         return props.inputDateFormat(
-          date instanceof Date ? new Date(date) : convertToDateObject(date, props.selectionType),
+          date instanceof Date ? new Date(date) : convertToDateObject(date, props.selectionType)
         )
       }
 
@@ -742,11 +742,16 @@ const CDateRangePicker = defineComponent({
         : 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
-        }
+      }
+
+      if (input === 'start') {
+        startDate.value = date ?? null
+        emit('start-date-change', date ?? null)
+        emit('update:start-date', date ?? null)
+      } else {
+        endDate.value = date ?? null
+        emit('end-date-change', date ?? null)
+        emit('update:end-date', date ?? null)
       }
     }
 
@@ -779,7 +784,7 @@ const CDateRangePicker = defineComponent({
             onInput: (event: Event) =>
               useDebouncedCallback(
                 () => handleOnChange((event.target as HTMLInputElement).value, 'start'),
-                props.inputOnChangeDelay,
+                props.inputOnChangeDelay
               ),
             placeholder: Array.isArray(props.placeholder)
               ? props.placeholder[0]
@@ -815,7 +820,7 @@ const CDateRangePicker = defineComponent({
               onInput: (event: Event) =>
                 useDebouncedCallback(
                   () => handleOnChange((event.target as HTMLInputElement).value, 'end'),
-                  props.inputOnChangeDelay,
+                  props.inputOnChangeDelay
                 ),
               placeholder: props.placeholder[1],
               readonly: props.inputReadOnly || typeof props.format === 'string',
@@ -847,7 +852,7 @@ const CDateRangePicker = defineComponent({
               class: 'date-picker-cleaner',
               onClick: (event: Event) => handleClear(event),
             }),
-        ],
+        ]
       )
 
     return () =>
@@ -925,7 +930,7 @@ const CDateRangePicker = defineComponent({
                             calendarDate.value = date
                           },
                         },
-                        () => props.todayButton,
+                        () => props.todayButton
                       ),
                     props.cancelButton &&
                       h(
@@ -943,7 +948,7 @@ const CDateRangePicker = defineComponent({
                           size: props.cancelButtonSize,
                           variant: props.cancelButtonVariant,
                         },
-                        () => props.cancelButton,
+                        () => props.cancelButton
                       ),
                     props.confirmButton &&
                       h(
@@ -956,7 +961,7 @@ const CDateRangePicker = defineComponent({
                           size: props.confirmButtonSize,
                           variant: props.confirmButtonVariant,
                         },
-                        () => props.confirmButton,
+                        () => props.confirmButton
                       ),
                   ]),
                 default: () =>
@@ -983,9 +988,9 @@ const CDateRangePicker = defineComponent({
                                 },
                                 variant: 'ghost',
                               },
-                              () => key,
-                            ),
-                          ),
+                              () => key
+                            )
+                          )
                         ),
                       h(
                         'div',
@@ -1055,8 +1060,8 @@ const CDateRangePicker = defineComponent({
                               navPrevDoubleIcon: () =>
                                 slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
                             }),
-                          },
-                        ),
+                          }
+                        )
                       ),
                       props.timepicker &&
                         h(
@@ -1105,14 +1110,14 @@ const CDateRangePicker = defineComponent({
                                       ? startDate.value && new Date(startDate.value)
                                       : endDate.value && new Date(endDate.value),
                                   variant: 'select',
-                                }),
-                              ),
+                                })
+                              )
                         ),
-                    ],
+                    ]
                   ),
-              },
+              }
             ),
-        },
+        }
       )
   },
 })

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './accordion'
 export * from './alert'
+export * from './autocomplete'
 export * from './avatar'
 export * from './backdrop'
 export * from './badge'

package/src/components/multi-select/CMultiSelect.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, PropType, provide, ref, watch } from 'vue'
+import { computed, defineComponent, h, PropType, provide, ref, useId, watch } from 'vue'
 
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CConditionalTeleport } from '../conditional-teleport'
@@ -33,12 +33,21 @@ const CMultiSelect = defineComponent({
     /**
      * A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button.
      *
-     * @since 5.7.0
+     * @since 5.13.0
      */
     ariaCleanerLabel: {
       type: String,
       default: 'Clear all selections',
     },
+    /**
+     * A string that provides an accessible label for the indicator button. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.7.0
+     */
+    ariaIndicatorLabel: {
+      type: String,
+      default: 'Toggle dropdown',
+    },
     /**
      * Enables selection cleaner element.
      *
@@ -353,6 +362,7 @@ const CMultiSelect = defineComponent({
     const searchValue = ref('')
     const selected = ref<SelectedOption[]>([])
     const userOptions = ref<Option[]>([])
+    const uniqueId = useId()
 
     const {
       dropdownMenuElement,
@@ -626,17 +636,6 @@ const CMultiSelect = defineComponent({
     }
 
     return () => [
-      h(CMultiSelectNativeSelect, {
-        id: props.id,
-        multiple: props.multiple,
-        name: props.name,
-        options: selected.value,
-        required: props.required,
-        value: props.multiple
-          ? selected.value.map((option: SelectedOption) => option.value.toString())
-          : selected.value.map((option: SelectedOption) => option.value)[0],
-        onChange: () => emit('change', selected.value),
-      }),
       h(
         CFormControlWrapper,
         {
@@ -646,7 +645,7 @@ const CMultiSelect = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          id: props.id,
+          id: props.id ?? uniqueId,
           invalid: props.invalid,
           label: props.label,
           text: props.text,
@@ -654,7 +653,18 @@ const CMultiSelect = defineComponent({
           valid: props.valid,
         },
         {
-          default: () =>
+          default: () => [
+            h(CMultiSelectNativeSelect, {
+              id: props.id ?? uniqueId,
+              multiple: props.multiple,
+              name: props.name ?? uniqueId,
+              options: selected.value,
+              required: props.required,
+              value: props.multiple
+                ? selected.value.map((option: SelectedOption) => option.value.toString())
+                : selected.value.map((option: SelectedOption) => option.value)[0],
+              onChange: () => emit('change', selected.value),
+            }),
             h(
               'div',
               {
@@ -669,7 +679,10 @@ const CMultiSelect = defineComponent({
                   },
                 ],
                 onKeydown: handleGlobalSearch,
+                role: 'combobox',
+                'aria-haspopup': 'listbox',
                 'aria-expanded': isOpen.value,
+                ...(props.teleport && { 'aria-owns': `multi-select-listbox-${uniqueId}` }),
                 ref: multiSelectRef,
               },
               {
@@ -709,6 +722,8 @@ const CMultiSelect = defineComponent({
                                     type: 'text',
                                     class: 'form-multi-select-search',
                                     disabled: props.disabled,
+                                    id: `search-${props.id ?? uniqueId}`,
+                                    name: `search-${props.name ?? uniqueId}`,
                                     autocomplete: 'off',
                                     onInput: (event: InputEvent) => handleSearchChange(event),
                                     onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
@@ -769,6 +784,7 @@ const CMultiSelect = defineComponent({
                                   }
                                 },
                                 type: 'button',
+                                'aria-label': props.ariaIndicatorLabel,
                                 ...(props.disabled && { tabIndex: -1 }),
                               }),
                             ],
@@ -794,8 +810,11 @@ const CMultiSelect = defineComponent({
                                 show: props.teleport && isOpen.value,
                               },
                             ],
+                            id: `multi-select-listbox-${uniqueId}`,
                             onKeydown: handleGlobalSearch,
-                            role: 'menu',
+                            role: 'listbox',
+                            'aria-labelledby': props.id ?? uniqueId,
+                            'aria-multiselectable': props.multiple,
                             ref: dropdownMenuElement,
                           },
                           {
@@ -834,6 +853,7 @@ const CMultiSelect = defineComponent({
                 ],
               }
             ),
+          ],
         }
       ),
     ]

package/src/components/multi-select/CMultiSelectOptions.ts

@@ -3,7 +3,7 @@ import { defineComponent, h, PropType, VNode } from 'vue'
 import { CElementCover } from '../element-cover'
 import { CVirtualScroller } from '../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './utils'
+import { getNextSibling, getPreviousSibling } from '../../utils'
 import type { Option, OptionsGroup } from './types'
 
 const CMultiSelectOptions = defineComponent({
@@ -91,6 +91,10 @@ const CMultiSelectOptions = defineComponent({
                     onClick: () => handleOptionClick(option as Option),
                     onKeydown: (event: any) => handleKeyDown(event, option as Option),
                     tabindex: 0,
+                    role: 'option',
+                    'aria-selected': props.selected.some(
+                      (_option) => _option.value === option.value,
+                    ),
                   },
                   props.scopedSlots && props.scopedSlots['options']
                     ? h(props.scopedSlots['options'], { option: option })

package/src/components/multi-select/utils.ts

@@ -66,46 +66,12 @@ export const flattenOptionsArray = (
   return optionsList
 }
 
-export const getNextSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.nextElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.nextElementSibling
-  }
-
-  return
-}
-
 export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
   return Array.from(
     container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
   )
 }
 
-export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.previousElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.previousElementSibling
-  }
-
-  return
-}
-
 export const isExternalSearch = (search: Search): boolean => {
   return (
     (typeof search === 'string' && search === 'external') ||

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

@@ -466,7 +466,19 @@ const CTimePicker = defineComponent({
           onInput: (event: Event) =>
             useDebouncedCallback(() => {
               if (isValidTime((event.target as HTMLInputElement).value)) {
-                date.value = convertTimeToDate((event.target as HTMLInputElement).value)
+                const _date = convertTimeToDate((event.target as HTMLInputElement).value)
+                date.value = _date
+
+                if (_date) {
+                  emit('change', _date.toTimeString(), _date.toLocaleTimeString(props.locale), _date)
+                  emit('update:time', _date.toLocaleTimeString(props.locale))
+                } else {
+                  emit('change', null)
+                  emit('update:time', null)
+                }
+              } else {
+                emit('change', null)
+                emit('update:time', null)
               }
             }, props.inputOnChangeDelay),
           placeholder: props.placeholder,

package/src/utils/getNextSibling.ts

@@ -0,0 +1,18 @@
+export const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+
+  return
+}
+
+export default getNextSibling

package/src/utils/getPreviousSibling.ts

@@ -0,0 +1,18 @@
+const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+
+  return
+}
+
+export default getPreviousSibling

package/src/utils/index.ts

@@ -1,4 +1,6 @@
 import getNextActiveElement from './getNextActiveElement'
+import getNextSibling from './getNextSibling'
+import getPreviousSibling from './getPreviousSibling'
 import getRTLPlacement from './getRTLPlacement'
 import getUID from './getUID'
 import isEqual from './isEqual'
@@ -8,6 +10,8 @@ import isRTL from './isRTL'
 
 export {
   getNextActiveElement,
+  getNextSibling,
+  getPreviousSibling,
   getRTLPlacement,
   getUID,
   isEqual,