@coreui/vue-pro 5.15.0 → 5.17.0

package/src/components/autocomplete/CAutocomplete.ts

@@ -785,22 +785,23 @@ const CAutocomplete = defineComponent({
                             handleClear()
                           },
                         }),
-                      h('button', {
-                        type: 'button',
-                        class: 'autocomplete-indicator',
-                        disabled:
-                          !(props.searchNoResultsLabel || filteredOptions.value.length > 0) &&
-                          !isExternalSearch(props.search),
-                        onClick: (event: Event) => {
-                          event.preventDefault()
-                          event.stopPropagation()
-                          if (visible.value) {
-                            handleDropdownHide()
-                          } else {
-                            handleDropdownShow()
-                          }
-                        },
-                      }),
+                      props.indicator &&
+                        h('button', {
+                          type: 'button',
+                          class: 'autocomplete-indicator',
+                          disabled:
+                            !(props.searchNoResultsLabel || filteredOptions.value.length > 0) &&
+                            !isExternalSearch(props.search),
+                          onClick: (event: Event) => {
+                            event.preventDefault()
+                            event.stopPropagation()
+                            if (visible.value) {
+                              handleDropdownHide()
+                            } else {
+                              handleDropdownShow()
+                            }
+                          },
+                        }),
                     ]),
                 ]
               ),

package/src/components/calendar/CCalendar.ts

@@ -905,6 +905,7 @@ const CCalendar = defineComponent({
               h(
                 'button',
                 {
+                  type: 'button',
                   class: 'calendar-nav-btn',
                   'aria-label': props.ariaNavPrevYearLabel,
                   onClick: () => handleNavigationOnClick('prev', true),
@@ -920,6 +921,7 @@ const CCalendar = defineComponent({
                 h(
                   'button',
                   {
+                    type: 'button',
                     class: 'calendar-nav-btn',
                     'aria-label': props.ariaNavPrevMonthLabel,
                     onClick: () => handleNavigationOnClick('prev'),
@@ -945,6 +947,7 @@ const CCalendar = defineComponent({
               h(
                 'button',
                 {
+                  type: 'button',
                   class: 'calendar-nav-btn',
                   onClick: () => {
                     if (props.navigation) view.value = 'months'
@@ -955,6 +958,7 @@ const CCalendar = defineComponent({
             h(
               'button',
               {
+                type: 'button',
                 class: 'calendar-nav-btn',
                 onClick: () => {
                   if (props.navigation) view.value = 'years'
@@ -976,6 +980,7 @@ const CCalendar = defineComponent({
                 h(
                   'button',
                   {
+                    type: 'button',
                     class: 'calendar-nav-btn',
                     'aria-label': props.ariaNavNextMonthLabel,
                     onClick: () => handleNavigationOnClick('next'),
@@ -990,6 +995,7 @@ const CCalendar = defineComponent({
               h(
                 'button',
                 {
+                  type: 'button',
                   class: 'calendar-nav-btn',
                   'aria-label': props.ariaNavNextYearLabel,
                   onClick: () => handleNavigationOnClick('next', true),

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/index.ts

@@ -32,6 +32,7 @@ export * from './multi-select'
 export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
+export * from './one-time-password-input'
 export * from './password-input'
 export * from './pagination'
 export * from './picker'

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({