@coreui/vue-pro 5.15.0 → 5.17.0

package/src/components/one-time-password-input/__tests__/__snapshots__/COneTimePassword.spec.ts.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COneTimePassword Component rendering COneTimePassword customize props 1`] = `"<div class="form-otp" role="group"><input type="text" class="form-otp-control" tabindex="0" aria-label="Digit 1 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 2 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 3 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 4 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="hidden" value=""></div>"`;
+
+exports[`COneTimePassword Component rendering loads and displays COneTimePassword component 1`] = `"<div class="form-otp" role="group"><input type="text" class="form-otp-control" tabindex="0" aria-label="Digit 1 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 2 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 3 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 4 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="hidden" value=""></div>"`;
+
+exports[`COneTimePassword with default value renders correctly 1`] = `
+"<div class="form-otp" role="group">
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput><input type="hidden" value="">
+</div>"
+`;
+
+exports[`Customize COneTimePassword component renders correctly 1`] = `
+"<div class="form-otp form-otp-lg" role="group">
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput><input type="hidden" disabled="" value="">
+</div>"
+`;
+
+exports[`Loads and display COneTimePassword component renders correctly 1`] = `
+"<div class="form-otp" role="group">
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput><input type="hidden" value="">
+</div>"
+`;

package/src/components/one-time-password-input/index.ts

@@ -0,0 +1,4 @@
+import { COneTimePassword } from './COneTimePassword'
+import { COneTimePasswordInput } from './COneTimePasswordInput'
+
+export { COneTimePassword, COneTimePasswordInput }

package/src/components/one-time-password-input/utils.ts

@@ -0,0 +1,13 @@
+export const isValidInput = (value: string, type: 'number' | 'text'): boolean => {
+  if (type === 'number') {
+    return /^\d$/.test(value)
+  }
+  return /^.$/u.test(value)
+}
+
+export const extractValidChars = (value: string, type: 'number' | 'text'): string => {
+  if (type === 'number') {
+    return value.replace(/\D/g, '')
+  }
+  return value
+}

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
           )