@coreui/vue-pro 5.14.0 → 5.15.0

package/src/components/picker/CPicker.ts

@@ -2,6 +2,7 @@ import { cloneVNode, defineComponent, h, PropType, ref, watch } from 'vue'
 import { createPopper } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
+import { CFocusTrap } from '../focus-trap'
 
 import { isRTL } from '../../utils'
 
@@ -63,7 +64,7 @@ const CPicker = defineComponent({
       () => props.visible,
       () => {
         visible.value = props.visible
-      },
+      }
     )
 
     watch(visible, () => {
@@ -142,62 +143,67 @@ const CPicker = defineComponent({
       default: {
         return () =>
           h(
-            'div',
-            {
-              class: [
-                attrs.class,
-                {
-                  show: visible.value,
-                },
-              ],
-              ref: pickerRef,
-            },
-            [
-              /**
-               * @slot Location for the toggler element.
-               */
-              slots.toggler &&
-                slots.toggler().map((slot) =>
-                  cloneVNode(slot, {
-                    onClick: () => {
-                      if (!props.disabled && !visible.value) {
-                        visible.value = true
-                      }
-                    },
-                    ref: (el) => {
-                      togglerRef.value = el
-                    },
-                  }),
-                ),
+            CFocusTrap,
+            { active: visible.value, ...(props.teleport && { additionalContainer: dropdownRef }) },
+            () =>
               h(
-                CConditionalTeleport,
+                'div',
                 {
-                  teleport: props.teleport,
+                  class: [
+                    attrs.class,
+                    {
+                      show: visible.value,
+                    },
+                  ],
+                  ref: pickerRef,
                 },
-                {
-                  default: () =>
-                    h(
-                      'div',
-                      {
-                        class: [
-                          props.dropdownClassNames,
+                [
+                  /**
+                   * @slot Location for the toggler element.
+                   */
+                  slots.toggler &&
+                    slots.toggler().map((slot) =>
+                      cloneVNode(slot, {
+                        onClick: () => {
+                          if (!props.disabled && !visible.value) {
+                            visible.value = true
+                          }
+                        },
+                        ref: (el) => {
+                          togglerRef.value = el
+                        },
+                      })
+                    ),
+                  h(
+                    CConditionalTeleport,
+                    {
+                      teleport: props.teleport,
+                    },
+                    {
+                      default: () =>
+                        h(
+                          'div',
                           {
-                            show: props.teleport && visible.value,
+                            class: [
+                              props.dropdownClassNames,
+                              {
+                                show: props.teleport && visible.value,
+                              },
+                            ],
+                            ref: dropdownRef,
                           },
-                        ],
-                        ref: dropdownRef,
-                      },
-                      [
-                        slots.default && slots.default(),
-                        /**
-                         * @slot Location for the footer element.
-                         */
-                        props.footer && slots.footer && slots.footer(),
-                      ],
-                    ),
-                },
-              ),
-            ],
+                          [
+                            slots.default && slots.default(),
+                            /**
+                             * @slot Location for the footer element.
+                             */
+                            props.footer && slots.footer && slots.footer(),
+                          ]
+                        ),
+                    }
+                  ),
+                ]
+              )
           )
       }
     }

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

@@ -463,24 +463,23 @@ const CTimePicker = defineComponent({
           disabled: props.disabled,
           id: props.id,
           name: props.name,
-          onInput: (event: Event) =>
-            useDebouncedCallback(() => {
-              if (isValidTime((event.target as HTMLInputElement).value)) {
-                const _date = convertTimeToDate((event.target as HTMLInputElement).value)
-                date.value = _date
+          onInput: useDebouncedCallback((event: Event) => {
+            if (isValidTime((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)
-                }
+              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)
               }
-            }, props.inputOnChangeDelay),
+            } else {
+              emit('change', null)
+              emit('update:time', null)
+            }
+          }, props.inputOnChangeDelay),
           placeholder: props.placeholder,
           readonly: props.inputReadOnly,
           ref: inputRef,

package/src/composables/useDebouncedCallback.ts

@@ -12,5 +12,5 @@ export const useDebouncedCallback = <F extends Function>(callback: F, delay: num
     timeout.value = setTimeout(handler, delay)
   }
 
-  return debouncedFn()
+  return debouncedFn
 }